شرح data URL بنظام Base64 (وكيفية إنشاء واحدة)
data URL هي طريقة لدمج ملف مباشرة داخل صفحة ويب أو ورقة أنماط أو بريد إلكتروني — دون طلب منفصل. تُرمَّز بايتات الصورة كـ Base64 وتُحمَل داخل خاصية src نفسها.
تشريح data URL
تتبع data URL الصيغة data:<نوع الوسائط>;base64,<البيانات>. بالنسبة لـ PNG تكون data:image/png;base64,iVBORw0KGgo... يخبر البادئة المتصفح بأمرين: نوع البيانات (نوع MIME) وأنها مشفرة بـ Base64. يفك المتصفح الترميز ويعرضها تماماً كملفٍ مُجلَب.
لماذا يقبلها المتصفحون أصلاً
المتصفحات مزودة بفك ترميز مدمج لروابط data، لذا صورة مدمجة بهذه الطريقة تعمل أينما يعمل وسم <img> — دون إضافات أو رحلات إضافية. الأمر نفسه في CSS مع background-image وurl()، وفي البريد لدمج الصور دون مرفقات.
المفاضلة الجوهرية: لا طلب، لكن بايتات أكثر
نظراً لأن Base64 يضيف نحو 33%، تكون data URL أكبر بثلث من الملف الأصلي، وتُحتسب ضمن حجم HTML أو CSS الخاص بك. بالنسبة للعناصر الصغيرة القابلة لإعادة الاستخدام — الأيقونات والشعارات والمعاينات الصغيرة — هذا ثمن عادل. أما للصور وملفات متعددة الميجابايت فهو إهدار.
متى تستخدمها
استخدم data URL مع حفنة من العناصر الصغيرة التي يجب أن تُعرض فوراً أو تسافر في ملف واحد: توقيعات البريد والأدوات أحادية الملف والعروض دون اتصال وأيقونات المواقع. أما للصور الكبيرة أو العديدة، فيفوز كاش المتصفح للملفات الحقيقية.
إنشاؤها وفك ترميزها
أداة «صورة إلى Base64» تبني data URL جاهزة للصق من أي ملف PNG أو JPG أو WebP أو GIF أو BMP أو AVIF، وأداة «Base64 إلى صورة» تفعل العكس: تكتشف الصيغة وتعيد الملف الأصلي. كلاهما يعمل في متصفحك، فلا يُرفع شيء.