ما هو Base64؟
Base64 نظام ترميز يحوّل البيانات الثنائية — مثل البايتات التي تتألف منها الصورة — إلى سلسلة من محارف نصية خالصة. والاسم مشتق من اعتماد النظام على 64 محرفاً مختلفاً (حروف كبيرة وصغيرة وأرقام إضافة إلى + و/) لتمثيل أي نوع من البيانات.
عملياً، يعني ذلك أن أي ملف صورة يمكن تحويله إلى سلسلة نصية طويلة كهذه:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCتسمّى هذه الصيغة Data URI (أو data URL). فبدل الإشارة إلى ملف خارجي، يحمل الرابط محتوى الصورة نفسه مرمّزاً نصاً. ويقرأ المتصفح هذه السلسلة ويعرض الصورة مباشرة دون أي طلب HTTP إضافي.
كيف يتكوّن الـ Data URI
يتبع كل Data URI لصورة النمط نفسه:
data:[MIME type];base64,[encoded data]ومكوّناته هي:
- data: — بادئة ثابتة تحدّد نوع المخطّط
- [MIME type] — صيغة الصورة، مثل
image/pngأوimage/jpegأوimage/svg+xmlأوimage/gif - ;base64, — يشير إلى أن المحتوى مرمّز بنظام Base64
- [encoded data] — السلسلة الطويلة التي تحمل محتوى الصورة الثنائي محوّلاً إلى نص
من المهم الانتباه إلى أن ترميز Base64 يزيد حجم البيانات بنحو 33%. فصورة بحجم 3 كيلوبايت تتحوّل إلى سلسلة بنحو 4 كيلوبايت، وسبب هذه الكلفة أن النظام يحتاج إلى محارف أكثر لتمثيل البايتات نفسها.
كيف تستخدم Base64 في HTML
لعرض صورة Base64 مباشرة داخل HTML، يكفي وضع الـ Data URI في خاصية src ضمن وسم <img>:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icon">يتعامل المتصفح مع هذا العنصر تماماً كأي صورة عادية. فبإمكانك تنسيقه بـ CSS وتحديد عرضه وارتفاعه واستخدامه في أي موضع يقبل وسم <img>.
كيف تستخدم Base64 في CSS
في CSS، يُستخدم الـ Data URI أساساً في خصائص صورة الخلفية:
.icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}يشيع هذا الأسلوب خصوصاً مع أيقونات SVG الصغيرة التي تحتاج إلى تلوين ديناميكي عبر CSS، أو مع صور الخلفية ضمن مكوّنات قابلة لإعادة الاستخدام في المكتبات.
💡 نصيحة خاصة بـ SVG: يمكن تضمين ملفات SVG بترميز Base64 أو مباشرة داخل HTML دون ترميز. والصيغة المضمّنة مباشرة أسهل قراءة وأيسر في التحكّم عبر CSS وJavaScript، بينما يُفضَّل Base64 حين يكون الـ SVG داخل ملف CSS خارجي.
متى تستخدم Base64 ومتى تتجنّبه
يتوقف الاختيار بين Base64 والملف الخارجي أساساً على حجم الصورة وسياق استخدامها. ويلخّص الجدول التالي أشيع الحالات:
| الحالة | التوصية | السبب |
|---|---|---|
| الأيقونات والرسوم الصغيرة (أقل من 2 كيلوبايت) | ✅ استخدم Base64 | يلغي طلب HTTP دون أثر محسوس في الحجم |
| أيقونات الموقع المضمّنة في CSS | ✅ استخدم Base64 | عملي ولا يعتمد على ملف خارجي |
| الصور المؤقتة وهياكل التحميل | ✅ استخدم Base64 | تظهر فوراً مع HTML دون ارتجاف في المحتوى |
| رسائل البريد بصيغة HTML | ✅ استخدم Base64 | كثير من برامج البريد يحجب الصور الخارجية |
| صور المحتوى (الصور الفوتوغرافية والبانرات) | ❌ تجنّبه | يزيد وزن ملف HTML ويمنع تخزين المتصفح المؤقت |
| الصور الأكبر من 5 كيلوبايت | ❌ تجنّبه | الزيادة في الحجم (33%) تضرّ بسرعة التحميل |
| الصور المتكرّرة في عدّة صفحات | ❌ تجنّبه | الملف الخارجي يُخزَّن مؤقتاً، أما Base64 فيُنزَّل مجدداً في كل صفحة |
مزايا Base64 مع الصور
حين يُستخدم في موضعه الصحيح، يقدّم Base64 فوائد حقيقية:
- لا طلبات HTTP إضافية — الصورة مضمّنة داخل HTML أو CSS نفسه، ما يقلّل زمن تحميل الصور المهمّة الظاهرة في أول الشاشة.
- تعمل دون اتصال وداخل البريد — لأنها لا تعتمد على خادم خارجي، تظهر الصورة حتى بلا اتصال (في التطبيقات التي تعمل دون إنترنت) أو في برامج البريد التي تحجب المحتوى الخارجي.
- قابلية نقل كاملة — ملف HTML واحد يحوي صوراً بترميز Base64 يمكن إرساله أو أرشفته دون فقدان أي عنصر مرئي.
- ظهور فوري مع العنصر — تظهر الصورة في لحظة عرض عنصر HTML نفسه دون تأخير إضافي، وهو مثالي لتفادي ارتجاف التخطيط في أيقونات الواجهة.
العيوب والقيود
ولـ Base64 كذلك كلفة ينبغي وزنها بعناية:
- حجم أكبر بنسبة 33% — تحويل البيانات إلى نص يزيد حتماً حجم ما يُنقل. وفي الصور الكبيرة يعني ذلك كيلوبايتات إضافية بلا أي فائدة.
- لا استفادة من ذاكرة المتصفح — الصور في ملفات خارجية يخزّنها المتصفح ويعيد استخدامها بين الصفحات، أما Base64 المضمّن في HTML فيُنزَّل من جديد في كل زيارة لارتباطه بالمستند.
- يصعّب الصيانة — استبدال صورة في الشيفرة يستلزم إعادة ترميز الملف ولصق سلسلة طويلة جديدة في HTML أو CSS، وهو عمل شاقّ ومعرّض للخطأ.
- يضرّ بوضوح الشيفرة — سلاسل Base64 الطويلة داخل CSS أو HTML تجعل قراءة الملف ومراجعته أمراً عسيراً.
- لا ينضغط جيداً بـ gzip — يضغط gzip وBrotli النصوص المتكرّرة بكفاءة، لكن سلاسل Base64 عالية العشوائية ولا تستفيد كثيراً من الضغط، بخلاف ملف الصورة الثنائي.
⚠️ قاعدة عملية: استخدم Base64 للصور الأصغر من 2 كيلوبايت فقط. وفيما عدا ذلك، يبقى الملف الخارجي المحسّن — خاصة بصيغة WebP أو AVIF — الخيار الأكفأ لأداء الموقع.
Base64 وأداء الموقع (PageSpeed)
يتوقف أثر Base64 في الأداء على طبيعة ما يجري ترميزه. فمع الأيقونات الصغيرة، قد يحسّن إلغاء طلب HTTP واحد قيمة Time to First Byte المحسوسة ويقلّل عدد الاتصالات المتوازية اللازمة، وهو ما ينعكس إيجاباً على مؤشرات Core Web Vitals، خصوصاً LCP (Largest Contentful Paint)، حين يكون العنصر الرئيسي في الصفحة أيقونة مضمّنة.
في المقابل، يزيد تضمين الصور الكبيرة بـ Base64 وزن مستند HTML مباشرة فيتأخّر بدء العرض. وGoogle PageSpeed Insights يميل إلى خفض تقييم الصفحات ذات HTML المفرط الثقل. أما الصور الفوتوغرافية والبانرات، فالطريق الصحيح فيها هو الملف الخارجي المحسّن دائماً.
إن كنت تريد تحسين صور موقعك، فالخطوة الأولى هي ضغطها وتحويلها إلى الصيغة الأكفأ. وتقوم أداة ضغط الصور من ImageTools بذلك داخل المتصفح مباشرة، دون إرسال ملفاتك إلى أي خادم.
كيف تحوّل صورة إلى Base64
هناك عدّة طرق لتوليد سلسلة Base64 من صورة:
- أدوات الويب — أسرع طريقة للاستخدام العابر. يوفّر ImageTools أداة تحويل صورة إلى Base64 التي ترمّز أي صورة داخل المتصفح وتسلّمك الشيفرة جاهزة للنسخ.
- سطر الأوامر (Linux/macOS) — يولّد الأمر
base64 image.pngالسلسلة المرمّزة. ولإنتاج الـ Data URI كاملاً:echo "data:image/png;base64,$(base64 -w 0 image.png)". - JavaScript داخل المتصفح — عبر واجهة
FileReaderيمكن ترميز أي ملف يختاره المستخدم إلى Base64 بصورة غير متزامنة. - Webpack وأدوات التجميع — لأدوات مثل Webpack وVite وRollup إضافات تحوّل الملفات الصغيرة تلقائياً إلى Base64 مضمّن أثناء البناء، وفق حدّ حجم قابل للضبط.
حوّل صورة إلى Base64 الآن
ارفع صورتك واحصل على الـ Data URI كاملاً جاهزاً للاستخدام في HTML أو CSS. المعالجة تجري كلياً داخل المتصفح.
افتح أداة Base64 ←الأسئلة الشائعة
ما المقصود بترميز الصورة بـ Base64؟
Base64 أسلوب لترميز البيانات الثنائية (مثل الصور) إلى نص ASCII. فبدل تحميل ملف الصورة على حدة، يُحوَّل محتواها إلى سلسلة محارف طويلة يمكن تضمينها مباشرة في HTML أو CSS لتكوّن Data URI.
هل يضرّ تحويل الصور إلى Base64 بأداء الموقع؟
يتوقف ذلك على الاستخدام. فمع الصور الصغيرة (الأيقونات وأيقونات الموقع والصور المؤقتة) قد يحسّن Base64 الأداء بإلغائه طلب HTTP. أما مع الصور الكبيرة فيزيد وزن الصفحة ويمنع التخزين المؤقت، فيسوء الأداء.
ما الحجم الأقصى الموصى به لاستخدام Base64؟
القاعدة العملية أن تستخدم Base64 للصور الأصغر من 2 كيلوبايت فقط. وفوق ذلك، تجعل الزيادة الناتجة عن الترميز (نحو 33%) وفقدان التخزين المؤقت الملفَّ الخارجي الخيار الأكفأ.
هل يعمل Base64 في جميع المتصفحات؟
نعم. صيغة Data URI بترميز Base64 مدعومة في جميع المتصفحات الحديثة، ومنها Chrome وFirefox وSafari وEdge ونسخها على الهاتف. أما المتصفحات القديمة جداً مثل IE6 فلا تدعمها، وهذا لم يعد أمراً ذا شأن عملي اليوم.
كيف أحوّل صورة إلى Base64 على الويب؟
يمكنك استخدام أداة تحويل صورة إلى Base64 من ImageTools. ما عليك سوى رفع الصورة، فتولّد الأداة تلقائياً سلسلة Base64 وشيفرة الـ Data URI جاهزة للاستخدام في HTML أو CSS.