تحويل الصورة إلى Base64 — Data URI وكود CSS
محوّل داخل المتصفح بين الصور وBase64 وData URI ومقاطع CSS وHTML
تعمل في متصفحك · لا يُرفع أي شيء
اسحب صورة لتحويلها إلى Base64
صورة واحدة حتى 5 MB. نص Base64 أكبر من الملف نفسه، لذا يناسب الأيقونات والشعارات الصغيرة. لا تغادر الصورة متصفحك.
ما هذه الأداة؟
تعيد هذه الأداة كتابة بايتات ملف الصورة في صورة نص من الأحرف والأرقام وبعض الرموز. ويمكن وضع هذا النص مباشرة في HTML أو CSS على هيئة Data URI مثل data:image/png;base64,.... يجري كل شيء داخل متصفحك، والاتجاه المعاكس، أي تحويل Base64 إلى صورة من جديد، موجود في الصفحة نفسها.
طريقة الاستخدام
- اختر صورة ← Base64 ثم اسحب صورة أو اخترها: ملف واحد حتى 5 MB.
- تحت المعاينة راجع الحجم الأصلي وحجم نص Base64 ونسبة الزيادة ونصيحة الحجم.
- في المربع الذي تحتاجه (Data URI أو نص Base64 فقط أو CSS background-image أو وسم HTML img) اضغط نسخ. القيم الطويلة يظهر أولها فقط، لكن النسخ يأخذها كاملة، ويمكنك أيضًا تنزيل ملف نصي.
- للاتجاه المعاكس اختر Base64 ← صورة والصق نص Base64 أو Data URI، فتظهر معاينة وزر تنزيل الصورة.
كيف تعمل؟
- الترميز: Base64 القياسي (RFC 4648)، كل 3 بايتات تصبح 4 أحرف، مع حشو بالرمز
=حتى يصبح الطول من مضاعفات 4. تُحوَّل بايتات الملف مباشرة لا سلسلة نصية، لذا تُستعاد أي صورة دون تغيير. - نوع MIME: يُقرأ من البايتات الأولى في الملف (JPEG وPNG وGIF وWebP وSVG وغيرها) ويوضع بعد
data:. لا يهم إن كان امتداد الملف خاطئًا. - وسم HTML: تُضاف السمتان width وheight عندما يمكن قراءة أبعاد الصورة.
- نصيحة الحجم: حتى 10 KB مناسب للتضمين، وما يزيد على 50 KB يستحق التفكير، وما يزيد على 500 KB ينبغي رفعه والربط إليه.
- فك الترميز: يُقبل Base64 الآمن للروابط (
-و_) وغياب حشو=. إذا اختلف النوع المعلن عن الصورة الحقيقية يُستخدم النوع الحقيقي ويُنبَّه المستخدم. لا تُقرأ Data URI التي لا تحتوي على;base64.
مثال
| العنصر | القيمة |
|---|---|
| الأصل | أيقونة بحجم 2.1 KB |
| نص Base64 | نحو 2.8 KB (+33%) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
الأسئلة الشائعة
هل تُرفع صورتي إلى خادم؟
لا. قراءة الملف وترميزه إلى Base64 يجريان داخل متصفحك، ولا يُحفظ النص الناتج في أي مكان.
لماذا يزيد Base64 حجم البيانات؟
يكتب Base64 كل 3 بايتات في 4 أحرف، فيصبح النص أكبر من الملف بنحو الثلث (33%). وعندما يكون داخل HTML أو CSS لا يستطيع المتصفح تخزين الصورة مؤقتًا بمفردها، فتُنزَّل من جديد مع كل تحميل للصفحة.
متى يصبح استخدام Base64 فكرة سيئة؟
لا توجد قاعدة ثابتة، لكن المعتاد تضمين الأيقونات والشعارات ومؤشرات التحميل الصغيرة بحجم 10 KB تقريبًا، وإبقاء ما يزيد على 50 KB تقريبًا ملفًا عاديًا. تقسّم الأداة الأحجام إلى حتى 10 KB وحتى 50 KB وحتى 500 KB وأكبر، وتخبرك بالفئة التي تقع فيها. الأفضل رفع الصور الكبيرة والربط إليها.
أين تفيد Data URI؟
في سمة src لوسم img في HTML، وفي url() داخل background-image في CSS، وفي توقيع البريد الإلكتروني، وفي ملفات Markdown، أو في صفحة HTML من ملف واحد تريد أن تنتقل الصورة معها. لا حاجة إلى ملف صورة إضافي، مع أن بعض برامج البريد تحجب صور Data URI.
عند فك الترميز تظهر رسالة بأن البيانات غير صالحة.
بادئة Data URI اختيارية، وتُتجاهل المسافات وفواصل الأسطر، ويمكنك لصق مقطع CSS أو HTML كامل وسيُعثر على Data URI بداخله. إن استمر الفشل فالنص على الأرجح مقطوع أو فيه أحرف زائدة. تُرفض البيانات التي ليست صورة.
ماذا عن الصور التي تزيد على 5 MB؟
بضعة ميغابايتات من Base64 تُبطئ المتصفح ويصعب لصقها في أي مكان، لذا تُقبل صورة واحدة حتى 5 MB. صغّر الصور الأكبر أولًا بأداة ضغط الصور أو تغيير حجمها.
