Тег <img>

Тег <img> встраивает изображение в документ. Это void-элемент — не имеет закрывающего тега.

Syntax

<img src="photo.jpg" alt="Описание изображения">

Attributes

src URL изображения. Обязательный атрибут.
alt Текстовое описание изображения для скринридеров и на случай, если изображение не загрузилось. Обязателен для доступности.
width / height Размеры в пикселях. Указание обоих помогает браузеру зарезервировать место и избежать смещения макета (CLS).
loading "lazy" откладывает загрузку, пока изображение не приблизится к видимой области.
srcset / sizes Список изображений разной плотности/размера для responsive-загрузки.

Example

<img src="hero.jpg" alt="Команда за работой в офисе" width="800" height="450" loading="lazy">

Notes

  • alt="" (пустой) корректен для декоративных изображений, не несущих информации.
  • Без width/height браузер не может зарезервировать место под изображение до загрузки, что вызывает смещение контента.

Accessibility

  • alt не должен повторять слово "изображение" — просто опишите, что на нём.
  • Для сложных изображений (графики, диаграммы) alt должен передавать суть данных, а не только внешний вид.

Похожие инструменты