تحويل الصورة إلى Base64
حوّل الصورة إلى نص Base64 أو رابط بيانات (Data URI) جاهز للصق.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
ما هو Base64، ولماذا تُرمَّز به صورة؟
يمثّل Base64 البيانات الثنائية باستخدام 64 حرفًا قابلًا للطباعة، حتى تنتقل البايتات بأمان عبر قنوات صُممت للنصوص: نص رسائل البريد، وحمولات JSON، وسمات HTML، وملفات CSS. وكل ثلاثة بايتات تصبح أربعة أحرف، ما يعني أن الصيغة المرمَّزة أكبر من الملف الأصلي بنحو 33 في المئة.
والصورة المرمَّزة تُكتب عادةً كرابط بيانات: data:image/png;base64, تليها الحمولة. ضعه في وسم <img> أو في خلفية CSS فلا تحتاج الصورة إلى طلب HTTP منفصل، لأنها موجودة في المستند أصلًا. وهذه هي الميزة كلها، وهي الحد أيضًا: فالحجم المتضخم يُدرج في كل صفحة أو ملف تنسيق يستخدمه، لذا تناسب هذه التقنية الأيقونات الصغيرة لا الصور الفوتوغرافية.
لماذا أنشأنا هذه الأداة
يرمّز المطورون الصور لإدراج عناصر صغيرة في رسائل البريد حيث تُحجب الصور الخارجية افتراضيًا، أو لتضمين أيقونات في ملف HTML مستقل بذاته، أو لتخزين صورة داخل سجل JSON، أو لتجنب طلب إضافي لعنصر صغير.
والصور المعنية كثيرًا ما تكون عناصر غير منشورة أو لقطات شاشة داخلية، والترميز حساب محلي بحت لا سبب لإشراك خادم فيه. أداتنا تقرأ الملف عبر واجهة FileReader في المتصفح وترمّزه داخل التبويب، فلا يُرسل شيء ولا تُحفظ أي نسخة. لا حد للحجم سوى ذاكرة جهازك، ولأن العمل محلي فترميز ملف كبير لا يعني انتظار رفعه.
نصائح وأخطاء شائعة
- يضيف Base64 نحو 33 في المئة إلى حجم الملف، فلا تُدرج إلا العناصر الصغيرة كالأيقونات.
- روابط البيانات لا تُخزَّن مؤقتًا بمعزل عن المستند الذي يحتويها، وهذا يضر في الزيارات المتكررة.
- اضغط الصورة قبل ترميزها؛ فطول النص يتبع حجم الملف مباشرة.
- الصور المدرجة مفيدة في رسائل HTML البريدية، حيث تُحجب الصور الخارجية افتراضيًا.
بداية سريعة: استخدام تحويل الصورة إلى Base64
- حمّل الصورة التي تريد ترميزها.
- نفّذ الترميز لإنتاج نص Base64.
- انسخه كرابط بيانات كامل إذا كنت ستلصقه في HTML أو CSS.
- تحقق من طول الناتج؛ فما يتجاوز بضعة كيلوبايتات أفضل عادةً كملف عادي.
- الصقه في مستندك أو ملف التنسيق أو الحمولة.
فُك الترميز في الاتجاه الآخر بأداة تحويل Base64 إلى صورة، وصغّر المصدر أولًا بأداة ضغط الصور ليبقى النص بطول معقول.
ما هو ترميز Base64
يمثّل Base64 البيانات الثنائية، كبايتات الصورة، باستخدام أحرف نصية قابلة للطباعة فقط. والنتيجة نص، كثيرًا ما يسبقه رأس رابط بيانات مثل data:image/png;base64, ليعرف المتصفح أنه صورة قابلة للتضمين. وعندها يستطيع أي مكان يقبل النص أن يحمل الصورة.
متى يكون Base64 الخيار الصحيح
- الأيقونات والشعارات الصغيرة في CSS وHTML: تضمين صورة صغيرة يوفّر طلبًا إضافيًا على الشبكة، وقد يسرّع تحميل الصفحة.
- الصور داخل JSON وواجهات API: حين لا ينقل النظام إلا النصوص، يتيح Base64 للصورة أن ترافقها.
- الملفات المستقلة بذاتها: ملف HTML واحد مضمّن الصور لا يحتاج إلى مجلد مرافق.
- البريد أو ملفات الإعدادات حيث لا يُسمح برابط صورة خارجي.
متى تتجنبه
Base64 ليس مجانيًا. فالنص المرمَّز أكبر بنحو 33 في المئة من الملف الثنائي الأصلي. وهذه الزيادة تافهة لأيقونة بحجم 2 كيلوبايت لكنها هدر لصورة بحجم 2 ميغابايت. قواعد عامة:
- لا تضمّن إلا الصور الصغيرة. لأي شيء بحجم معتبر، ملف صورة عادي برابط أكفأ وقابل للتخزين المؤقت.
- كتل Base64 الكبيرة تضخّم ملفات HTML وCSS ولا يستطيع المتصفح تخزينها مؤقتًا بشكل منفصل.
- اضغط الصورة وصغّرها أولًا بأداتي ضغط الصور وتغيير حجم الصورة ليبقى النص صغيرًا.
استخدامات شائعة
- أيقونات مضمّنة في ملفات التنسيق.
- صور في حمولات JSON.
- مستندات HTML من ملف واحد.