دمج صور PNG مباشرة في HTML

يتيح تضمين صور PNG في HTML العرض المباشر داخل المتصفح دون الرجوع إلى ملف خارجي. لتحقيق ذلك، استخدم تقنية التشفير Base64:

Base64 قم بتشفير صورة PNG:

استخدم أدوات التشفير عبر الإنترنت لتحويل صورة PNG إلى سلسلة Base64. تمثل هذه السلسلة بيانات الصورة الثنائية بتنسيق نصي.

دمج سلسلة Base64 في HTML:

خيار CSS:

حدد فئة CSS للصورة وقم بتعيين خاصية صورة الخلفية باستخدام وظيفة url() وسلسلة Base64. على سبيل المثال:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

خيار علامة الصورة:بدلاً من ذلك، قم بتضمين سلسلة Base64 مباشرة في علامة :