Изображения в 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>