مولّد Data URI
حوّل أي ملف أو نص إلى data URI بنوع MIME الصحيح بترميز Base64 أو النسبة المئوية، مع مقتطفات <img> وخلفية CSS جاهزة. يعمل محليًا.
ما هو مولّد Data URI؟
يضمّن data URI الملف مباشرة داخل HTML أو CSS أو JSON بصيغة data:<mime>;base64,<data>، فلا يلزم طلب منفصل. تحوّل هذه الأداة أي ملف (صور وخطوط وSVG وPDF…) أو نصًا تكتبه إلى data URI، وتكتشف نوع MIME، وتتيح لك اختيار Base64 أو ترميز النسبة المئوية، وتعطيك مقتطفات HTML وCSS المطابقة.
كيفية استخدام مولّد Data URI
- اختر ملف وأسقط ملفًا، أو اختر نص واكتب المحتوى.
- راجع نوع MIME أو عدّله.
- أبقِ ترميز Base64 مفعّلًا للملفات الثنائية؛ وأوقفه لترميز النصوص وSVG بالنسبة المئوية (غالبًا أصغر).
- انسخ Data URI أو مقتطف HTML / CSS.
مثال
Text: Hello, World! (Base64 on)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
متى تستخدم مولّد Data URI
استخدم data URI للأصول الصغيرة: الأيقونات وملفات SVG الصغيرة والصور النائبة والخطوط في العروض ذات الملف الواحد أو قوالب البريد وبيانات الاختبار. وتجنّبها للملفات التي تتجاوز بضعة كيلوبايتات في المواقع: يضيف Base64 نحو 33% إلى الحجم ولا يمكن تخزين البيانات المضمّنة مؤقتًا بمعزل عن الصفحة أو ورقة الأنماط.
كيف يعمل مولّد Data URI
يُقرأ الملف كبايتات في المتصفح. ويأتي نوع MIME من المتصفح أو من امتداد الملف. مع Base64 تُرمَّز البايتات بالأبجدية القياسية (RFC 4648) وتُكتب بصيغة data:<mime>;base64,… (RFC 2397). وبدون Base64 يُفكّ المحتوى بترميز UTF-8 ويُهرَّب بـ encodeURIComponent، وتُضاف ;charset=utf-8 لأنواع النصوص. وتُعرض معاينة للصور وحجم النتيجة.
حالات الاستخدام الشائعة
- تضمين أيقونة SVG صغيرة في background-image في CSS
- تضمين الصور في تقرير HTML من ملف واحد
- وضع صورة صغيرة في بيانات اختبار لـ API بصيغة JSON
- إنشاء صورة توقيع بريد مكتفية بذاتها
الأسئلة الشائعة
لماذا data URI أكبر من ملفي؟
يرمّز Base64 كل 3 بايتات في 4 أحرف، فتكون النتيجة أكبر بنحو 33%. وترميز النصوص أو SVG بالنسبة المئوية غالبًا أصغر.
هل يُرفع ملفي؟
لا. يُقرأ الملف ويُرمَّز بالكامل في متصفحك.
ما الحد الأقصى للحجم؟
تقبل الأداة ملفات حتى 20 ميغابايت، لكن المتصفحات وعملاء البريد تتعامل مع data URI الكبيرة بشكل سيئ؛ أبقِها صغيرة.