يضمّن Data URI محتوى ملف مباشرة داخل HTML أو CSS أو JS بصيغة data:[نوع];base64,[بيانات] دون طلب HTTP منفصل. أحد أكثر استخداماته شيوعًا في مواقع المحتوى العربي هو تضمين خطوط الويب العربية كـ Data URI داخل ملف CSS نفسه، لأن دعم أنظمة التشغيل والمتصفحات لخطوط عربية جيدة ومتناسقة أقل انتشارًا من الخطوط اللاتينية.
لماذا تُضمَّن خطوط الويب العربية غالبًا كـ Data URI
بما أن عدد الخطوط العربية المثبتة افتراضيًا على الأجهزة أقل تنوعًا وجودة من الخطوط اللاتينية، يعتمد كثير من المواقع العربية على خط ويب مخصص. تضمين ملف الخط كـ Data URI داخل CSS يضمن ظهور الخط فورًا مع الصفحة دون طلب شبكة إضافي قد يتأخر ويسبب "وميض نص بلا تنسيق" (FOUT) واضحًا في نص عربي متصل الحروف.
مزايا
- طلبات HTTP أقل — مفيد للأيقونات الصغيرة أو صور الخلفية.
- الملف "مرتبط" بالمستند ولا ينكسر عند نقل الملفات أو تغيير مسار الاستضافة.
- يضمن ظهور الخط أو الأيقونة فورًا دون تأخير شبكة إضافي.
القيود
- يزيد Base64 حجم البيانات بنحو الثلث مقارنة بالملف الثنائي.
- يُضخّم Data URI الكبير ملف CSS نفسه ولا يُخزَّن مؤقتًا بمعزل عن الصفحة.
- بالنسبة للخطوط أو الصور الكبيرة والمُعاد استخدامها كثيرًا، يكون الملف المنفصل القابل للتخزين المؤقت أكثر كفاءة تقريبًا دائمًا.
SVG كنص وليس Base64
على عكس الصيغ النقطية، فإن SVG نص (XML)، لذا لا يستلزم بالضرورة ترميزه بـ Base64: يكفي الهروب الصحيح من الرموز الخاصة عبر percent-encoding (data:image/svg+xml,%3Csvg...). هذا مفيد خصوصًا لأيقونات الواجهة البسيطة التي غالبًا ما تُعدَّل يدويًا داخل ملف CSS نفسه.