العربية

مولّد Data URI

حوّل نصًا أو ملفًا إلى عنوان data: لاستخدامه في HTML أو CSS أو JSON، بترميز Base64 أو ترميز النسبة المئوية. والصق data URI موجودًا لفحص نوع MIME ومجموعة الأحرف والحجم، ومعاينته وتنزيل محتواه.

تعمل بالكامل داخل متصفحك، ولا يُرفع أي شيء.

طريقة الاستخدام

  1. اختر «نص» واكتب النص، أو اختر «ملف» وحدد الملف الذي تريد تضمينه.
  2. تحقق من قيمة «نوع MIME» أو أدخلها، مثل image/png أو image/svg+xml، ثم اختر في «الترميز» إما Base64 أو «ترميز النسبة المئوية».
  3. انسخ data URI الناتج إلى ملف HTML أو CSS أو JSON.
  4. لفحص data URI موجود، انتقل إلى «تحليل» والصقه لترى نوع MIME ومجموعة الأحرف والحجم ومعاينة للمحتوى، ثم نزّل الملف المضمّن.

صيغة Data URI

يحمل data URI، المعرّف في RFC 2397، ملفًا صغيرًا داخل عنوان URL نفسه:

data:[<mediatype>][;base64],<data>

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

يخبر نوع الوسائط المتصفحَ بكيفية تفسير البيانات؛ وعند حذفه يُفترض النوع text/plain;charset=US-ASCII. وتعني العلامة ;base64 أن الجزء الذي يلي الفاصلة مرمّز بـ Base64. ومن دونها تكون البيانات نصًا عاديًا تُرمَّز فيه الأحرف الخاصة بالنسبة المئوية.

Base64 أم ترميز النسبة المئوية

Base64 هو الخيار الصحيح للملفات الثنائية مثل PNG وJPEG وWebP والخطوط وملفات PDF، وهو يضيف دائمًا نحو 33%. أما مع الصيغ النصية فغالبًا ما يكون ترميز النسبة المئوية أصغر، لأن معظم الأحرف تبقى كما هي، ولا يحتاج إلى التهريب إلا القليل منها، مثل < و> و# و% وعلامات الاقتباس المزدوجة. وهذا يجعله مناسبًا لأيقونات SVG، كما أن النتيجة المقروءة تنضغط بشكل أفضل باستخدام gzip أو Brotli. لكن كل بايت من النص غير ASCII يصبح ثلاثة أحرف، لذا يكون Base64 أقصر عادةً للنصوص الصينية أو السيريلية أو العربية. وإن لم تكن متأكدًا، فجرّب الخيارين واحتفظ بالنتيجة الأقصر.

/* SVG مرمّز بالنسبة المئوية في CSS: علامات اقتباس مفردة في الداخل، و# تُكتب %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

متى يكون التضمين مجديًا

يوفّر data URI طلب HTTP، لكن البيانات تصبح جزءًا من المستند الذي يحتويها:

  • لا تخزين مؤقت مستقل. الصورة المضمّنة في HTML تُنزَّل من جديد مع كل صفحة. أما المضمّنة في ورقة أنماط فتُخزَّن مؤقتًا مع ذلك الملف، وتغييرها يُبطل ورقة الأنماط بأكملها.
  • عرض أولي أبطأ. تؤخر عناوين data URI الكبيرة في CSS عرض الصفحة، لأن المتصفح يجب أن ينزّل ورقة الأنماط كاملة ويحللها أولًا.
  • زيادة في الحجم. يضيف Base64 الثلث، ولا يُستعاد منه إلا جزء عند ضغط HTML أو CSS.

مع HTTP/2 وHTTP/3 تصبح الطلبات الإضافية زهيدة التكلفة، لذا لا تضمّن إلا الموارد الصغيرة التي لا تتجاوز بضعة كيلوبايتات، مثل الأيقونات أو العناصر النائبة الصغيرة أو خلفية أساسية، وقدّم كل ما عداها كملفات عادية. ويجب على المواقع التي تطبق سياسة أمان المحتوى (CSP) أن تسمح بـ data: في img-src أو font-src كي تُحمَّل الصور والخطوط المضمّنة.

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

هل هناك حد لحجم data URI؟

لا يحدد RFC 2397 أي حد، وتقبل المتصفحات الحديثة عناوين data URI بحجم عدة ميغابايتات في الصور وأوراق الأنماط. ومع ذلك تبقى العناوين الكبيرة فكرة سيئة: فهي تضخّم الصفحة، ولا يمكن تخزينها مؤقتًا بشكل مستقل، ويستغرق تحليلها وقتًا أطول.

لماذا لا يُفتح data URI عند النقر على رابط يشير إليه؟

تمنع معظم المتصفحات صفحات الويب من توجيه النافذة الرئيسية إلى عنوان data:، وذلك للحماية من التصيد الاحتيالي. استخدم عناوين data URI داخل الصور أو CSS أو روابط التنزيل، أو الصق العنوان في قسم «تحليل» هنا لمعاينته وتنزيل محتواه.

كيف أستخدم data URI في HTML وCSS؟
ضعه في أي مكان يُتوقع فيه عنوان URL: <img src="data:image/png;base64,..."> في HTML، أو background-image: url("data:image/svg+xml,...") في CSS. وضع القيمة بين علامتي اقتباس في CSS، خاصة مع SVG المرمّز بالنسبة المئوية.
هل يلزم تحديد مجموعة الأحرف؟
نعم بالنسبة إلى الأنواع النصية مثل text/plain أو text/html التي تحتوي على أحرف غير ASCII: أضف ;charset=UTF-8 بعد نوع الوسائط، وإلا فقد يشوّهها الترميز الافتراضي US-ASCII. أما الأنواع الثنائية مثل image/png فلا تحتاج إلى تحديد مجموعة الأحرف.
كيف أحوّل صورة إلى data URI؟
اختر ملف الصورة هنا، أو استخدم أداة تحويل الصور إلى Base64، التي يمكنها أيضًا تغيير حجم الصورة أو تحويل صيغتها أولًا، وتُخرج مقتطفات HTML وCSS وMarkdown جاهزة.

أدوات ذات صلة

تحويل الصور إلى Base64رمّز أي صورة إلى data URI أو وسم img أو CSS أو Markdown تحويل الملفات إلى Base64رمّز أي ملف حتى 100 ميغابايت إلى Base64 خام أو data URI تحويل SVG إلى Base64رسومات SVG المتجهة بترميز Base64 بصيغة data:image/svg+xml تحويل Base64 إلى ملففك ترميز Base64 إلى ملف مع اكتشاف النوع والمعاينة