<img>
- 25 января 2023
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023