تصویر، alt و توضیح figure

تصویر هم محتواست

img با src نشانی تصویر و با alt جایگزین متنی آن را مشخص می‌کند. alt باید نقش تصویر را در همان بافت توضیح بدهد؛ لازم نیست با «تصویرِ» شروع شود. اگر تصویر صرفاً تزئینی است، alt="" بنویس. اگر تصویر خودش لینک است، جایگزین متنی باید مقصد یا عمل آن را روشن کند. حذف alt با alt خالی یکسان نیست.

<figure>
  <img src="images/workshop.jpg"
       alt="شرکت‌کنندگان در حال تمرین گروهی HTML"
       width="960" height="640">
  <figcaption>تمرین عملی جلسهٔ اول</figcaption>
</figure>

width و height ابعاد ذاتی را اعلام می‌کنند و به کاهش جابه‌جایی صفحه هنگام بارگذاری کمک می‌کنند. برای کوچک‌شدن انعطاف‌پذیر تصویر در CSS معمولاً max-width:100% و height:auto به کار می‌رود. figcaption توضیح قابل‌مشاهدهٔ figure است و جایگزین alt نیست.

برای تصاویر پایین صفحه loading="lazy" مفید است؛ تصویر اصلی بالای صفحه را بی‌دلیل تنبل بارگذاری نکن. JPEG برای بسیاری از عکس‌ها، PNG برای موارد نیازمند شفافیت و WebP/AVIF برای فشرده‌سازی بهینه کاربرد دارند؛ حجم و کیفیت را با هم بررسی کن. فایل‌های images/workshop.jpg در این مثال را باید در پوشهٔ پروژهٔ خودت قرار بدهی.