HTML - тег <img> используется для вставки изображения в HTML-документ. Само изображение не вставляется непосредственно в документ, браузер вставляет HTML-изображение из источника, указанного в теге <img>.
Тег <img> - синтаксис и код
Тег <img> пуст, а это значит, что закрывающий тег не требуется. Он содержит только атрибуты. Но в XHTML тег (<img>) должен быть закрыт (<img/>).
Как вставить изображение:
<img src="/htm/img_leopard.jpg" alt="Леопард" width="194" height="200">
Определение и использование
- HTML - тег
<img> используется для встраивания изображения в HTML-страницу;
- Изображения технически не вставляются на веб-страницу - изображения связаны с веб-страницами;
- Тег
<img> создает пространство хранения для изображения, на которое указывает ссылка.
Тег <img> имеет два обязательных атрибута:
src — указывает путь к изображению;alt — указывает альтернативный текст для изображения, если изображение по каким-либо причинам не может быть отображено.
✪ Рекомендация: всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать во время загрузки изображения.
★ Примечание: чтобы связать изображение с другим документом, просто вставьте <img> в тег <a> (см. пример ниже).
Поддержка <img> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| alt |
text |
Указывает альтернативный текст для изображения |
| crossorigin |
anonymous
use-credentials |
Разрешает использование изображений со сторонних сайтов, которые предоставляют доступ к совместному использованию ресурсов, с canvas |
| height |
pixels |
Определяет высоту изображения |
| ismap |
ismap |
Указывает изображение как карту изображений на стороне сервера |
| loading |
eager
lazy |
Указывает, должен ли браузер загружать изображение немедленно или отложить загрузку изображений до тех пор, пока не будут выполнены некоторые условия |
| longdesc |
URL |
Указывает URL-адрес подробного описания изображения |
| referrerpolicy |
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url |
Указывает, какую информацию о реферере использовать при получении изображения |
| sizes |
sizes |
Определяет размеры изображений для разных макетов страниц |
| src |
URL |
Указывает путь к изображению |
| srcset |
URL-list |
Указывает список файлов изображений для использования в различных ситуациях |
| usemap |
#mapname |
Указывает изображение как карту изображений на стороне клиента |
| width |
pixels |
Определяет ширину изображения |
Глобальные атрибуты
Тег <img> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <img> также поддерживает атрибуты событий в HTML
Дополнительные примеры
Выравнивание изображений с помощью CSS
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="vertical-align:bottom">
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="vertical-align:middle">
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="vertical-align:top">
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="float:right">
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="float:left">
Вертикальное выравнивание - снизу
Здесь текст. 
Ещё немного текста. Здесь ещё текст. И здесь текст.
Вертикальное выравнивание - по центру
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Вертикальное выравнивание - сверху
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
float:right (плавает справа)
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
float:left (плавает слева)
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Добавляем рамку изображения с помощью CSS
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="border:2px solid white">
Пример добавления левого и правого отступа с помощью CSS
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="vertical-align:middle;margin:0px 50px">
Изображение без отступа
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Изображение с левым и правым отступом
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Пример добавления нижнего и верхнего отступа с помощью CSS
<img src="/htm/smiling.png" alt="Улыбающийся HTML смайлик" width="50" height="50" style="vertical-align:middle;margin:50px 0px">
Изображение без отступа
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Изображение с верхним и нижним отступом
Здесь текст. Ещё немного текста. Здесь ещё текст. И здесь текст.
Пример разметки ссылки-картинки
<a href="/html">
<img src="/htm/smiling.png" alt="Руководство по HTML" width="50" height="50">
</a>
Это изображение ссылается на другой радел веб-сайта:
Пример создания карты изображений с интерактивными областями
Каждая область представляет собой гиперссылку:
<img src="/htm/workplace.png" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="33,10,250,247" alt="Ноутбук" href="/htm/notebook.htm">
<area shape="rect" coords="288,90,322,138" alt="Смартфон" href="/htm/smartphone.htm">
<area shape="circle" coords="336,188,37" alt="Кофе" href="/htm/coffee.htm">
</map>
Связанные страницы
Руководство по HTML: изображения в HTML
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент img со следующими значениями по умолчанию:
img {
display: inline-block;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
