ما هو Base64
Base64 طريقة لكتابة البيانات الثنائية بحروف عادية: أحرف وأرقام وبعض الرموز. وتتحول الصورة المرمَّزة بهذه الطريقة إلى سلسلة طويلة يمكنك وضعها في data URI، مثلًا داخل وسم img أو خلفية CSS.
يبدأ data URI ببادئة قصيرة تسمّي نوع الملف، يتبعها النص المرمَّز. ويفك المتصفح ترميزه ويعرض الصورة دون طلب منفصل لملف.
استخدامات جيدة
- أيقونات صغيرة جدًا أو صور مؤقتة توفّر طلبًا إضافيًا
- رسائل HTML الإلكترونية أو الصفحات ذات الملف الواحد حيث يصعب استخدام ملفات خارجية
- بيانات الاختبار وأمثلة التوثيق وحمولات JSON، حيث لا يتوفر مرجع إلى ملف
- صور صغيرة في ورقة أنماط يجب أن تعمل دون أي ملفات أخرى
العيوب
النص أكبر من الملف الأصلي بنحو الثلث. ولا يستطيع المتصفح تخزين الصورة المضمَّنة مؤقتًا بمعزل عن الصفحة، فتُنزَّل مجددًا كلما نُزِّل HTML أو CSS. كما تجعل السلاسل الكبيرة HTML وCSS أثقل في التحليل وأصعب في القراءة والتعديل.
وتحظر بعض برامج البريد الصور المضمَّنة أو تحدّها، فاختبر قبل الاعتماد عليها في نشرة بريدية.
وكقاعدة عامة، ضمِّن الصور الصغيرة فقط، حتى بضعة كيلوبايت. وقدّم كل ما هو أكبر ملفًا عاديًا، حيث يمكن تخزينه مؤقتًا وضغطه وتحميله كسولًا. كما تتيح الخوادم الحديثة انتقال عدة ملفات عبر اتصال واحد، فصار التوفير من تجنب الطلب أصغر مما كان.
مثال تطبيقي (توضيحي)
لنفترض أن لديك أيقونة سهم بحجم 2 KB تُستخدم في زر واحد. بعد الترميز تصبح نحو 2.7 KB من النص في CSS. وهذا مقبول، وتوفّر طلبًا.
والآن لنفترض أنك ضمّنت صورة بحجم 300 KB. ينمو النص إلى نحو 400 KB داخل HTML. وفي كل زيارة يجب تنزيله وتحليله كله قبل أن تكتمل الصفحة، ولا يمكن تخزين الصورة مؤقتًا بمفردها. والأفضل ملف عادي مضغوط مسبقًا.
خطوات العمل
- اجعل الصورة أصغر ما يمكن أولًا: غيّر حجمها واضغطها.
- تحقق من حجم الملف النهائي. فإن زاد على بضعة كيلوبايت، ففكّر في ملف عادي بدلًا منه.
- حوّلها إلى Base64 واختر المخرج الذي تحتاجه: data URI أو وسم img في HTML أو خلفية CSS أو Base64 خام.
- الصقها في صفحتك أو ورقة الأنماط أو JSON.
- افتح الصفحة وتأكد من ظهور الصورة.
أخطاء شائعة
- تضمين صور فوتوغرافية كبيرة، مما يضخّم الصفحة.
- ترميز صورة قبل تحسينها، فتضمّن بايتات غير ضرورية.
- تكرار السلسلة الطويلة نفسها في عدة أماكن بدل تعريفها مرة واحدة، مثلًا كصنف CSS واحد.
- نسيان بادئة data URI عند استخدام Base64 خام في HTML أو CSS.
- اعتبار Base64 نوعًا من الأمان. فهو مجرد ترميز ويستطيع أي شخص فك ترميزه.
- لصق سلسلة طويلة جدًا في مكان يحدّ طول السطر أو حجم الحقل، مما قد يقطع الصورة.
قائمة مراجعة سريعة
- هل الصورة بضعة كيلوبايت فقط؟
- هل غُيّر حجمها وضُغطت مسبقًا؟
- هل تحتاج فعلًا إلى تجنب ملف منفصل؟
- هل اختبرت النتيجة في المكان الذي ستُستخدم فيه؟
- هل ستُعاد الصورة في عدة صفحات؟ إن كان كذلك فالأرجح أن الملف العادي أفضل.
نفّذ ذلك مع DoneImg في متصفحك
افتح أداة Base64 وأضف صورتك. اختر المخرج الذي تحتاجه: data URI أو وسم img جاهزًا في HTML أو قاعدة خلفية CSS أو نص Base64 الخام، ثم انسخه. وإذا بدت السلسلة طويلة جدًا، فعد واستخدم أداتي تغيير الحجم والضغط أولًا.
يتم التحويل في متصفحك، فلا تُرفع الصورة أبدًا وتبقى على جهازك.
أسئلة شائعة
هل يصغّر Base64 الصورة؟
لا. إنه يجعل البيانات أكبر بنحو الثلث، لأنه يخزّن الملف كنص.
هل يمكنني إعادة Base64 إلى صورة؟
نعم. Base64 قابل للعكس، وتفك المتصفحات ترميز data URI تلقائيًا.
هل Base64 مناسب لشعار في ترويسة موقعي؟
غالبًا لا. الشعار الذي يظهر في كل صفحة أفضل أن يكون ملفًا عاديًا أو SVG، ليخزّنه المتصفح مؤقتًا مرة واحدة ويعيد استخدامه في كل مكان.
ما نوع الملف الذي أرمّزه؟
استخدم الأصغر للصورة: SVG للأشكال البسيطة، وWebP أو PNG للرسومات الصغيرة، وJPG أو WebP للصور الفوتوغرافية. الترميز لا يغيّر الصورة، بل طريقة كتابتها فقط.