ما هو مولّد Data URI؟

Data URI Generator يحوّل الملفات إلى معرّفات URI مشفّرة بـ base64 يمكنك تضمينها مباشرة في HTML أو CSS أو JavaScript. يُلغي طلبات HTTP الإضافية للموارد الصغيرة كالأيقونات والخطوط.

أسقط ملفاً يصل إلى ٢٠ ميغابايت، ستحدد الأداة نوع MIME، تكوّد البايتات إلى base64، وتعطيك ثلاث قصاصات جاهزة للصق: رابط data URI الخام، قاعدة CSS background-image، ووسم HTML img. الصور ترفق بمعاينة حيّة لاكتشاف الإخراج الفارغ أو التالف قبل وضعه في الإنتاج. يمكنك أيضاً لصق نص لترميز سلسلة SVG أو JSON، وتصغير الصور الكبيرة قبل الترميز ليبقى الرابط صغيراً، وتصحيح نوع MIME إذا اكتُشف خطأً، وترميز عدة ملفات دفعة واحدة، أو جلب ملف بعيد مباشرة من رابطه، أو الانتقال إلى وضع فك الترميز للصق رابط data URI واستعادة الملف الأصلي وتنزيله.

كيفية الاستخدام

1. ارفع ملفاً بالمنتقي، أو انتقل إلى وضع النص والصق نصاً (SVG أو JSON أو CSS) لترميزه.
2. تُشفّر الأداة الملف بـ base64 وتُنشئ معرّف URI كاملاً مع نوع MIME الصحيح.
3. انسخ معرّف URI لاستخدامه في خاصية img src أو خلفية CSS أو كود JavaScript.

متى تستخدم

• تضمين شعار أو أيقونة في عرض HTML من ملف واحد بدون استضافة موارد.
• إدراج صور البريد ليظهر محتواه حتى لو حُجب التحميل من الخارج.
• لصق خط أو SVG داخل CSS لإلغاء طلب يعيق رسم الصفحة.

النتيجة

حوّل ملف favicon.png بحجم 2 كيلوبايت إلى معرّف URI والصقه مباشرة في HTML — طلب شبكة أقل في كل تحميل صفحة.

الأسئلة الشائعة

لماذا يكبر data URI المُرمَّز نحو ٣٣٪ عن الملف؟

Base64 يمثل كل ٣ بايتات ثنائية بأربعة محارف ASCII، فالحجم يكبر ٣٣٪. تشغيل gzip على استجابة HTTP يستعيد معظمه للأصول النصية، لكن ملف HTML أو CSS على القرص يبقى أكبر من المورد الأصلي.

ما الحد العملي لحجم data URI؟

نحو ١٠ كيلوبايت قبل الترميز للاستعمال داخل المستند. بعد ذلك يفهمه المتصفح لكن تضيع فائدة التخزين المؤقت (يُعاد تحليله مع كل صفحة)، وتصير ملفات HTML وCSS أصعب في التحرير. للأصول الأكبر استضف الملف عادياً.

هل يصلح data URI كصورة خلفية CSS؟

نعم، تعطيك الأداة قاعدة CSS الكاملة. لفّ الرابط داخل url() ضمن background-image. المتصفح يفك ترميزه عند الرسم الأول، فتبقى الأيقونة الصغيرة مدمجة وتُحذف طلبة شبكة كانت ستؤخر الرسم الأول.

هل يخزّن المتصفح data URI مثل صورة عادية؟

لا. الـ data URI جزء من المستند الأم، فلا يُخزَّن إلا حين يُخزَّن المستند. الصورة نفسها مذكورة في عشرين صفحة يعاد تحليلها عشرين مرة. لمشاركة الأصول بين الصفحات يكون رابط مستضاف اعتيادي أسرع إجمالاً.

هل تعمل data URIs في بريد HTML؟

Gmail وApple Mail يعرضانها. Outlook (نسخة سطح المكتب لويندوز) يحذفها. للتوافق الواسع أرفق الصورة بوصفها جزءاً بمرجع CID بدل وضع data URI داخل جسم HTML.

أدوات ذات صلة