محوّل GIF إلى Base64

نبذة عن صيغة GIF

يعود تاريخ GIF (Graphics Interchange Format، ونوع MIME الخاص بها image/gif) إلى عام 1987. يستخدم كل إطار لوحة ألوان لا تتجاوز 256 لونًا، مضغوطة بلا فقدان بخوارزمية LZW. والشفافية فيها إما كاملة أو معدومة: إذ يمكن تحديد مدخل واحد في لوحة الألوان على أنه شفاف، لكن لا توجد شفافية جزئية. ويمكن أن يحتوي الملف على إطارات كثيرة لكل منها مدة تأخير خاصة، مع عدد مرات للتكرار، ولهذا أصبحت GIF صيغة الرسوم المتحركة القصيرة.

تبدأ سلسلة Base64 لصورة GIF بـ R0lGODlh للإصدار الشائع GIF89a، أو R0lGODdh للإصدار الأقدم GIF87a.

الحفاظ على الحركة

عندما تُبقي على الصيغة الأصلية، ترمّز الأداة بايتات الملف كما هي. لذلك يتحرك data URI تمامًا كما يتحرك الملف، سواء استخدمته في وسم <img> أو كخلفية CSS.

أما التحويل إلى PNG أو JPEG أو WebP، أو تحديد «أقصى عرض»، فيعيد رسم الصورة في المتصفح، ولا يبقى منها إلا الإطار الأول. وهذا مفيد عندما تريد معاينة ثابتة لرسم متحرك، أما للنسخة المتحركة فاترك الخيارين كليهما دون تفعيل.

متى لا يزال data URI بصيغة GIF منطقيًا

• مؤشرات التحميل الدوّارة الصغيرة وأيقونات الحالة المتحركة في CSS.
• البكسل الشفاف الكلاسيكي بأبعاد 1x1، المستخدم كقيمة src مؤقتة. لا يشغل إلا بضع عشرات من البايتات، وأقل بكثير من 100 حرف في Base64.
• الرسوم الخطية البسيطة ذات الألوان القليلة، حيث تكون GIF صغيرة الحجم.

أما الرسوم المتحركة الكبيرة فلا تناسبها. فصورة GIF تعبيرية بحجم 2 ميغابايت تتحول إلى نحو 2.7 ميغابايت من النص لا يمكن تخزينه مؤقتًا بشكل مستقل؛ بينما يكون ملف فيديو مستضاف أو صورة WebP متحركة أخف بكثير.

.loading {
  background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}

<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">