صور Base64 و Data URI: متى تفيد ومتى تضر سرعة الموقع؟
ما المقصود بصورة Base64؟
Base64 طريقة لتحويل بيانات الصورة إلى نص. عندما تستخدم Data URI، يصبح النص الناتج قابلاً للوضع مباشرة داخل src في وسم الصورة أو داخل background-image في CSS. الفكرة مغرية لأنها تلغي الحاجة إلى ملف صورة منفصل، لكن لها تكلفة واضحة: النص الناتج أطول من الملف الأصلي غالباً.
لذلك لا ينبغي استخدام Base64 كحل عام لكل الصور. هو أداة دقيقة لحالات محددة، خصوصاً للمطورين الذين يحتاجون مثالاً مستقلاً أو أيقونة صغيرة جداً.
متى يكون Base64 مفيداً؟
- أيقونة صغيرة داخل صفحة HTML واحدة.
- قالب بريد إلكتروني يحتاج صورة مضمنة.
- نموذج تجريبي تريد مشاركته كملف واحد.
- ملفات CSS صغيرة تحتاج خلفية بسيطة جداً.
يمكنك استخدام تحويل الصورة إلى Base64 للحصول على Data URI كامل أو Base64 فقط أو كود CSS جاهز.
متى يضر الأداء؟
إذا كانت الصورة كبيرة أو تظهر في أكثر من صفحة، فإن تضمينها كنص داخل HTML أو CSS يجعل الملف الأساسي أكبر، ويمنع المتصفح من التعامل معها كملف مستقل قابل للتخزين المؤقت بالطريقة المعتادة. كذلك يصعب تعديلها لاحقاً لأن النص طويل وغير مقروء.
للصور العادية، الأفضل استخدام ملف مستقل بصيغة مناسبة مثل WebP أو JPG أو PNG، ثم ضغطه جيداً. استخدم ضغط الصور أو PNG إلى WebP بدلاً من تحويل الصور الكبيرة إلى Base64.
Data URI أم Base64 فقط؟
Data URI يحتوي على البادئة التي توضح نوع الملف، مثل data:image/png;base64,. هذا مناسب للاستخدام المباشر في HTML و CSS. أما Base64 فقط فهو الجزء النصي بعد الفاصلة، ويستخدم عندما يكون النظام الذي تعمل عليه يضيف البادئة بنفسه.
إذا لم تكن متأكداً، اختر Data URI كامل. فهو أكثر وضوحاً وأسهل اختباراً في المتصفح.
مثال HTML و CSS
في HTML:
<img src="data:image/png;base64,..." alt="أيقونة صغيرة">وفي CSS:
.icon {
background-image: url("data:image/png;base64,...");
}اختبر الصفحة بعد الاستخدام. إذا لاحظت أن ملف HTML أو CSS أصبح ضخماً، فارجع إلى ملف صورة مستقل.
قاعدة عملية
- استخدم Base64 للصور الصغيرة جداً فقط.
- تجنب الصور الفوتوغرافية والملفات الكبيرة.
- استخدم Data URI إذا كنت ستضع الناتج مباشرة في الكود.
- اضغط الصورة قبل التحويل إذا كان ذلك ممكناً.
- اختبر سرعة الصفحة بعد التضمين.
Base64 أداة مفيدة عندما تستخدمها بحذر. قيمته في تبسيط حالات صغيرة، لا في استبدال إدارة الصور الصحيحة في الموقع.
مثال قرار من مشروع حقيقي
تخيل أن لديك أيقونة سهم صغيرة بحجم 900 بايت تظهر مرة واحدة داخل قالب بريد. في هذه الحالة، تضمينها كـ Data URI قد يكون مقبولاً لأنك تقلل الاعتماد على رابط خارجي قد يحظره برنامج البريد. لكن إذا كان لديك شعار بحجم 80 كيلوبايت يظهر في كل صفحات الموقع، فتضمينه داخل CSS سيجعل ملف CSS أكبر في كل زيارة، وقد يبطئ التحميل بدلاً من تحسينه.
القاعدة التي نتبعها في Ainasr: إذا كان الملف صغيراً جداً، ثابتاً، ويُستخدم في سياق محدود، يمكن تجربة Base64. أما إذا كان الملف كبيراً، متكرراً، أو جزءاً من واجهة عامة، فالأفضل أن يبقى ملفاً مستقلاً مضغوطاً جيداً.
أخطاء شائعة عند استخدام Base64
- تضمين الصور الكبيرة: هذا يجعل HTML أو CSS ضخماً ويصعب صيانته.
- نسيان نوع MIME: إذا استخدمت Data URI خاطئاً، قد لا يعرض المتصفح الصورة.
- وضع Base64 في قواعد CSS كثيرة: التكرار يضاعف الحجم بسرعة.
- عدم ضغط الصورة أولاً: Base64 لا يضغط الصورة، بل يحولها إلى نص فقط.
قبل اعتماد الناتج، افتح أدوات المطور وتحقق من حجم ملفات الصفحة. إذا كان التضمين يزيد الصفحة بشكل واضح، ارجع إلى ملف صورة مستقل.