Тег <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 должен передавать суть данных, а не только внешний вид.
Похожие инструменты
Атрибут src
Атрибут src элементов img, script, video, audio, iframe: URL загружаемого ресурса.
Атрибут alt
Атрибут alt тега img: обязательное текстовое описание для доступности и fallback.
Responsive image
Как отдать браузеру несколько вариантов изображения для разных размеров экрана.
Lazy-loaded image
Атрибут loading="lazy" для отложенной загрузки изображений за пределами видимой области.
HTML Форматировщик и Минификатор
Форматирование и минификация HTML кода онлайн. Обработка полностью в браузере, без отправки на сервер.