<img>

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

Синтаксис тега <img>

<img src="url_of_image_file.jpg" alt="alternative_text" width="width_in_pixels" height="height_in_pixels">

Спецификация HTML

Тег <img> является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Базовое использование:

<img src="image.jpg" alt="Красивый закат" width="710" height="510">

Изменение размера изображения:

<img src="image.jpg" alt="Красивый закат" width="500" height="300">

Добавление подписи к изображению:

<figure>
  <img src="image.jpg" alt="Красивый закат">
  <figcaption>Прекрасный закат</figcaption>
</figure>

Добавление границы к изображению:

<img src="image.jpg" alt="Красивый закат" style="border: 1px solid black;">

Использование изображения в качестве ссылки:

<a href="<https://example.com>"><img src="image.jpg" alt="Красивый закат"></a>

Использование нескольких изображений с разным разрешением:

<picture>
  <source media="(min-width: 650px)" srcset="large_image.jpg">
  <source media=""(min-width: 465px)" srcset="medium_image.jpg">
  <img src="small_image.jpg" alt="Красивый закат">
</picture>

Для чего использовать тег <img>

• Для логотипа на веб-странице.
• Для изображения товара на сайте интернет-магазина.
• Для фотографии автора в блоге.
• Для карты на странице контактов.
• Для адреса или контактной информации компании в виде изображения.
• Для графика или диаграммы на веб-сайте.
• Для фотографии клиентов в разделе с отзывами.

Атрибуты тега <img>

src — URL файла изображения.

alt — альтернативный текст для изображения.

width — ширина изображения в пикселях.

height — высота изображения в пикселях.

sizes — размеры изображения для отзывчивого дизайна.

srcset — набор изображений для разных размеров устройства.

crossorigin — указывает, как должно обрабатываться изображение при загрузке с другого домена.

decoding — метод декодирования изображения.

usemap — карта изображений на стороне клиента.

referrerpolicy — указывает, какую информацию о реферере отправлять при получении изображения.

loading — поведение загрузки изображения.

fetchpriority — приоритет выборки изображения.

ismap — изображение в качестве карты изображений на стороне сервера.

Глобальные атрибуты

Тег <img> поддерживает все глобальные атрибуты HTML.

Ограничения

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

Нюансы

• При использовании тега <img> важно убедиться, что файл изображения существует по указанному URL.
• Изменение размера изображения с помощью атрибутов width и height может привести к его искажению, поэтому лучше изменить размер в редакторе перед загрузкой на сайт.

Поддержка браузерами

Тег <img> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

• Тег <svg> — для векторной графики.
• Тег <canvas> — для динамических изображений и пользовательских эффектов.
• Теги <figure> и <figcaption> — для добавления подписей к изображениям.

Чем заменить тег

Прямой замены тегу <img> не существует.

Актуальность

Тег <img> актуален и широко используется в разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.