الصور في HTML

تُضاف الصورة بالعنصر الفارغ <img>: تحدد src الملف وتحدد alt وصفًا نصيًا يُستخدم عند تعذر ظهور الصورة أو لقارئات الشاشة. وفي الصور الزخرفية تُترك alt="" فارغة.

<img src="images/bridge.jpg"
     alt="Evening view of a stone bridge over a river"
     width="640" height="400">

• اجعل alt قصيرًا ومفيدًا ولا تبدأه بكلمة «صورة».
• تحديد width وheight يمنع قفز الصفحة أثناء التحميل.

يناسب JPEG أو WebP الصور الفوتوغرافية، وPNG الشعارات التي تحتاج شفافية، وSVG الرسوم البسيطة. صغّر الملفات الكبيرة قبل رفعها. ويؤجل loading="lazy" تحميل الصور غير الظاهرة.

<img src="photo.webp" alt="Mountain village" loading="lazy" width="800" height="500">

لعرض صورة مع تعليقها استخدم <figure> و<figcaption> فيرتبط التعليق بالصورة منطقيًا. ولأحجام الشاشات المختلفة يمكن لـ <picture> تقديم عدة مصادر.

<figure>
  <img src="map.png" alt="Map of the old town">
  <figcaption>Fig. 1 — The old town and its main gates.</figcaption>
</figure>

<picture>
  <source media="(min-width: 800px)" srcset="wide.webp">
  <img src="narrow.webp" alt="Harbour at sunrise">
</picture>