Справочник HTML & CSS

<img>

Картинка.

Синтаксис

<img src="url" alt="description">

Атрибуты

Параметр	Тип	Описание
src	URL	Адрес файла картинки.
alt	text	Описание картинки: показывается, если она не загрузилась, и читается программами чтения с экрана.
width, height	number	Необязательные. Размер в пикселях; резервирует место до загрузки.
loading	lazy \| eager	Необязательный. `lazy` откладывает загрузку, пока картинка не приблизится к экрану.

Примеры

Картинка с описанием и размером:

<img src="/media/photo-200x200.jpg" alt="Coffee beans in a bowl" width="150" height="150">

Если файл не найден, вместо картинки виден текст alt:

<img src="/no-such-file.png" alt="Product photo" width="120" height="60">

Резиновая картинка не шире контейнера:

<style>
  img { max-width: 100%; height: auto; }
</style>
 
<img src="/media/photo-800x500.jpg" alt="A coffee shop interior" width="800" height="500">

Примечания

Тег одиночный — закрывать его не нужно. Декоративным картинкам ставят пустой alt="", чтобы программы чтения с экрана их пропускали. Указывайте width и height: так страница не «прыгает», пока картинка загружается.

См. также

alt — Текстовая альтернатива картинке: читается программами чтения с экрана и показывается, если картинка не загрузилась.
src — Адрес встраиваемого файла у `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
<picture> — Контейнер для нескольких вариантов картинки: браузер выбирает подходящий `<source>` или берёт `<img>`.
<figure> — Самостоятельная иллюстрация — картинка, схема, код или цитата — с подписью `<figcaption>`.
srcset — Несколько файлов одной картинки разного размера: браузер выбирает подходящий для экрана.
fetchpriority — Подсказка, насколько срочен ресурс по сравнению с другими того же типа, — например, чтобы главный баннер загрузился раньше остальных картинок.

Вопросы и ответы по теме

В учебнике

Изображения — Тег img, атрибуты src и alt, размеры, подпись figure и figcaption, форматы картинок и отложенная загрузка.

Спасибо, что читаете!