حوّل الصور إلى Base64 لـ HTML وCSS والبريد
سواء كانت أيقونة في نمط CSS أو شعاراً في توقيع بريد أو عرضاً بدون اتصال، فإن دمج الصور كروابط data URL بنظام Base64 تقنية موثوقة. يشرح هذا الدليل سير العمل والقواعد التي تُبقي الصفحات سريعة.
اختر الصورة المدخلة الصحيحة
ابدأ بأصغر ملف معقول: غيّر الحجم إلى مقاس العرض الفعلي، وفضل PNG أو WebP للأيقونات والشعارات وJPEG للصور الفوتوغرافية. ترث data URL حجم الملف المصدر: مصدر بحجم 2 ميجابايت يعني سلسلة تبلغ نحو 2.6 ميجابايت في ترميزك.
حوّل إلى data URL
تقرأ أداة «صورة إلى Base64» الملف في متصفحك وتنتج data URL جاهزة للنسخ أو حمولة Base64 خام. تحصل الصور النقطية على معاينة آمنة؛ ويُقدَّم SVG للتنزيل لمنع حقن الترميز.
ادمجها في HTML أو CSS
في HTML ضع القيمة مباشرة داخل وسم <img src="data:image/png;base64,...">. وفي CSS استخدمها داخل url() لخاصية background-image. يسافر نوع MIME داخل الرابط نفسه، فيعرضها المتصفح دون أي جلب خارجي.
توقيعات البريد وعملاء البريد
التواقيع هي الحالة الكلاسيكية: شعار Base64 يظهر لدى معظم عملاء البريد دون مرفقات. أبقِ الصورة المصدر بالغة الصغر — عند 150 بكسلاً لا تُرى أي تعليقات أو ظلال — وتذكر أن بعض العملاء يحجبون الصور الخارجية، وهو ما تتجاوزه data URL.
الأداء وحجم الملف
هامش Base64 البالغ 33% إضافة إلى وجود السلسلة في مستندك يعني أن data URL تصلح فقط لعدد قليل من العناصر الصغيرة. أما لأي شيء كبير أو مشترك بين الصفحات، فاستضف الصورة كملف واترك المتصفح يخزّنها مؤقتاً.
خصوصية بالتصميم
يتم كل التحويل في متصفحك، لذا لا تغادر الصورة جهازك حتى تختار أنت أين تلصق السلسلة المولّدة. لا رفع، ولا علامة مائية، ولا حساب.