يؤدي تضمين صورة إلى وضع وحدات البايت الخاصة بها داخل HTML، CSS أو مستند آخر. يمكن أن يجعل قطعة أثرية صغيرة مستقلة بذاتها، ولكنها أيضًا تربط الصورة بتسليم هذا المستند وتخزينه مؤقتًا. قرر بناءً على سير العمل الكامل بدلاً من افتراض أن عددًا أقل من عناوين URL يعني دائمًا صفحة أسرع.
بناء المجمع الصحيح
PNG بيانات الصورة URI تبدأ بـ data:image/png;base64,، متبوعًا بتمثيل Base64 للملف الأصلي. احتياجات JPEG image/jpeg; WebP الاحتياجات image/webp. لا تؤدي إعادة تسمية النوع MIME إلى تحويل البايتات. إذا كان جهاز الاستقبال يتطلب JPEG، فأعد تشفير الصورة قبل إنشاء بياناتها URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">العنصر النائب أعلاه ليس صورة عاملة؛ استبدله بالإخراج الكامل لجهاز التشفير. إذا كان الإخراج يحتوي بالفعل على data: البادئة، لا تقم بإضافة واحدة أخرى. حافظ على توازن علامات الاقتباس المحيطة وتجنب فواصل الأسطر التي يقدمها محررو النصوص الغنية.
احسب الحجم الحقيقي
يحتاج الجزء المشفر إلى أربعة أحرف لكل ثلاثة بايتات إدخال، مع تقريبها إلى مجموعات كاملة. تضيف البادئة Data URI المزيد. بالنسبة لملف بحجم 30000 بايت، تكون الحمولة وحدها 40000 حرف. قد يؤدي ضغط HTML إلى تغيير الحجم المنقول، ولكن لا يزال المتصفح بحاجة إلى تحليل المستند وفك تشفير الصورة. قم بقياس الصفحة الفعلية، وليس الملف المصدر فقط.
يمكن تخزين الصورة المعروضة بشكل منفصل مؤقتًا وإعادة استخدامها بشكل مستقل عبر الصفحات. ترتبط الصورة المضمنة بكل مستند يحتوي عليها. وبالتالي فإن الرسوم التوضيحية الكبيرة المتكررة تعتبر مرشحة ضعيفة للتضمين التلقائي. يمكن أن تكون الرموز الصغيرة التي يتم استخدامها لمرة واحدة في تقرير مستقل بمثابة مقايضة معقولة.
تحقق من الوجهة
يمكن أن تقيد سياسة أمان المحتوى data: الصور. قد يقوم عملاء البريد الإلكتروني بإزالة المحتوى المضمن أو رفضه. لا يثبت الملف الذي تتم معاينته في متصفحك أن تطبيق المستلم سيعرضه. اختبر التصدير الدقيق أو عميل البريد الإلكتروني أو النظام النهائي الذي تحتاج إلى دعمه.
بالنسبة للمعاينات المحلية المؤقتة، غالبًا ما يتجنب Blob URL إنشاء سلسلة Base64 كبيرة. قم بإلغاء URL عند إزالة طريقة العرض الخاصة به. بالنسبة للمصدر المستقل HTML، قد تكون البيانات URI مناسبة. احتفظ بالنص البديل والأبعاد في كلتا الحالتين. يتم تناول اعتبارات بناء الجملة والمتصفح في MDN: عناوين URL للبيانات.