<img>

Элемент <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG, PNG и др. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Синтаксис

<img src="<адрес>" alt="<текст>">

Атрибуты

alt
Альтернативный текст для изображения.
crossorigin
Является частью технологии CORS и применяется при загрузке изображения со стороннего сайта для использования в элементе <canvas>.
decoding
Указывает предпочтительный метод декодирования изображения.
height
Высота изображения.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
loading
Используется для управления загрузкой изображений на веб-странице.
referrerpolicy
Определяет, какие реферальные данные следует отправлять на сервер в заголовке Referer при получении изображения.
sizes
Задаёт размеры изображения для разных макетов страницы.
src
Путь к графическому файлу.
srcset
Путь к графическим файлам с учётом размера изображения и устройств.
width
Ширина изображения.
usemap
Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.

Также для этого элемента доступны универсальные атрибуты и события.

Устаревшие атрибуты

align
Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
border
Толщина рамки вокруг изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
vspace
Вертикальный отступ от изображения до окружающего контента.

Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.

Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>IMG</title> </head> <body> <p><a href="page/lorem.html"><img src="image/girl.jpg" width="120" height="120" alt="Девочка с муфтой"></a></p> </body> </html>

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

Браузеры

3 12 1 4 1 1
3 1 6 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Изображения