🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Элемент <img> используется для вставки изображений на веб-страницы.

У <img> нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

Существуют определенные правила или стандарты использования тега <img>, которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.

Обязательные атрибуты <img>

Атрибут src — обязательный, так как указывает путь к изображению.

<img src="cat.jpg">

Подробнее о том, как указывать src, читайте в отдельной статье «Как добавить изображение на страницу».

Атрибут alt также считается обязательным. Он обеспечивает текстовое описание изображения, что важно для доступности и в тех случаях, когда изображение не может быть отображено.

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

Атрибуты width и height рекомендуются для определения размеров изображения. Они помогают предотвратить «прыжки» на странице при её загрузке. Даже если картинка ещё не загрузилась, её рамка займёт нужное место в ожидании загрузки.

<img src="example.jpg" alt="Описание" width="300" height="200">

Атрибут loading="lazy" рекомендуется для изображений, которые не находятся в начале страницы. Он позволяет отложить загрузку до момента, когда пользователь начинает прокручивать страницу в их направлении.

<img src="example.jpg" alt="Описание" loading="lazy">

Атрибуты srcset и sizes могут быть добавлены, если у вас есть версии изображений разного размера для различных устройств. Подробнее

<img src="default.jpg" 
     alt="Адаптивное изображение"
     srcset="small.jpg 320w, medium.jpg 480w, large.jpg 800w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
>

Таким образом, тег <img> нужно использовать так, чтобы обеспечивать правильное отображение изображения, его адаптивность, доступность для всех пользователей и эффективную загрузку страницы.

Полезные ссылки

📝 HTML Standard. 4.8.3 The img element — спецификация

🖼️ Форматы изображений для веба — как выбрать изображение