<img> — элемент HTML, предназначенный для описания изображений.

Категории контента Потоковый контент, текстовый контент, embedded content, palpable content. Если элемент имеет атрибут usemap, он также принадлежит к категории интерактивного контента.
Допустимое содержимое Никакое, так как это empty element.
Пропуск тегов Начальный тег обязателен, конечного быть не должно.
Допустимые родительские элементы Любой элемент, который может содержать встравиваемое содержимое.
Разрешённые роли ARIA Любые
Интерфейс DOM HTMLImageElement

Атрибуты

К этому элементу также применимы глобальные атрибуты.

align Устарело HTML4.01, Вышла из употребления с версии HTML5 
Выравнивание изображения относительно окружающего его контекста. В HTML5 в качестве замены следует использовать CSS-свойства float и/или vertical-align.
alt
С помощью этого атрибута задается альтернативный текст, описывающий изображение. Он будет показан вместо изображения, если URL изображения неправилен, формат изображения не поддерживается, или если оно ещё не загружено.

Браузеры не всегда отображают изображение, определяемое элементом. Это относится к неграфическим браузерам (включая используемые людьми с нарушениями зрения), к случаям, когда пользователь отключил отображение изображений или когда браузер не смог отобразить изображение так как оно имеет некорректный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом, записанным в атрибуте alt элемента. По этим и другим причинам следует предоставлять содержательное значение атрибута alt всегда когда возможно.

Опущение этого атрибута означает, что изображение является ключевой частью контента, но для него нет текстового эквивалента. Если же значение атрибута — пустая строка (alt=""), то это означает, что изображение не является ключевой частью контента; тогда невизуальные браузеры имеют право совсем его не отображать.

border Устарело HTML4.01, Вышла из употребления с версии HTML5
Ширина рамки вокруг изображения. В HTML5 в качестве замены следует использовать CSS-свойство border.
crossorigin HTML5
Этот атрибут определяет, следует ли использовать CORS при загрузке изображения. Изображения, загруженные с помощью CORS могут быть использованы в элементе <canvas> без ограничения функциональности последних. У этого атрибута есть 2 допустимых значения:
anonymous
В этом случае перед загрузкой изображения выполняется cross-origin запрос (т.е. используется Origin: HTTP header). Однако, при этом не передаются параметры доступа (ни cookie, ни сертификат X.509, ни логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе использование изображения в <canvas> ограничивается.
use-credentials
Перед загрузкой изображения выполняется cross-origin запрос (Origin: HTTP header) с указанием параметров доступа (в виде cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе использование изображения в <canvas> ограничивается.
Если данный атрибут не задан, CORS при загрузке изображения не используется (нет заголовка Origin: HTTP header), и использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (например, при опечатке), используется значение anonymous. Для дополнительной информации обратитесь к статье CORS settings attributes.
decoding

Предоставляет подсказку браузеру относительно декодирования изображения. Разрешённые значения:

sync
Декодировать изображение синхронно для одновременного отображения с остальным содержимым.
async
Декодировать изображение асинхронно для уменьшения задержки перед отображением остального содержимого.
auto
Стандартный режим, который указывает на отсутствие предпочтений для режима декодирования. Браузер сам решает, что будет лучше для пользователя.
height
Высота изображения в пикселях. В HTML 4, высота могла быть определена в пикселях или в процентах. В HTML5 значение может быть определено только в пикселях.
hspace Устарело HTML4.01, Вышла из употребления с версии HTML5
Задаёт горизонтальный отступ от изображения в пикселях.  В HTML5 в качестве замены следует использовать CSS-свойство margin.
ismap
Атрибут логического типа, определяющий, является ли изображение фрагментом карты. В этом случае при клике на изображение на сервер передаются точные координаты клика.

Этот атрибут допустим только если элемент <img> является потомком элемента <a> с корректным атрибутом href.

longdesc
Ссылка на более детальное описание изображения. Возможными значениями являются URL или id элемента.
name Устарело HTML4.01, Вышла из употребления с версии HTML5
Имя элемента. Поддерживается только в HTML 4 для обратной совместимости. В качестве замены следует использовать атрибут id.
referrerpolicy
Строка, определяющая, какой referrer будет использован при загрузке реурса:
  • no-referrer: заголовок Referer не будет использован.
  • no-referrer-when-downgrade: заголово Referer будет отправлен при обращении к источнику без TLS (HTTPS). Это значение является значением по умолчанию.
  • origin: заголовок Referer будет включать схему страницы источника, хост и порт.
  • origin-when-cross-origin: при обращении к другим origin, в заголовок будет включена только информация о схеме, хосте и порте, а при обращении к тому же origin будет включён полный путь referer'а.
  • unsafe-url: заголовок Referer будет включать origin и путь и не будет включать fragment, пароль или имя пользователя. Этот вариант является небезопасным, потому что он может привести к утечке origin'ов и путей от TLS-защищённых ресурсов к незащищённым источникам.
sizesHTML5
Список из одной или более строк, разделённых запятой, определяющий множество исходных размеров. Каждый исходный размер состоит из:
  1. медиа-запрос. Не должен быть указан для последнего элемента.
  2. значение исходного размера.

Значение исходного размера определяет предполагаемый размер изображения при отображении. Браузеры используют текущий исходный размер для выбора одного из источников, предоставленных атрибутом srcset, в случае если эти источники описаны с помощью дескриптора ширины («w»). Выбранный исходный размер влияет на intrinsic размер изображения (отображаемый размер изображения, в случае отсутствия CSS-правил). Если атрибут srcset отсутствует, или не содержит значений с дескриптором ширины («w»), то атрибут sizes никак не учитывается.

src
Обязательный атрибут, в котором указывается URL изображения. В браузерах, поддерживающих атрибут srcset, атрибут src рассматривается как изображение-кандидат с дескриптором плотности пикселей равным 1x, кроме случаев когда в srcset определено изображение с таким дескриптором плотности пикселей или атрибут srcset содержит «w»-дескрипторов.
srcsetHTML5
Список из одной или более строк, разделённых запятой, определяющий множество размеров изображений, которые браузер может использовать. Каждая строка состоит из:
  1. URL изображения,
  2. опционально, пробел, затем один из:
    • дескриптор ширины, либо положительное число, за которым сразу следует «w». Дескриптор ширины будет разделён на исходный размер, указанный в атрибуте sizes, для расчёта эффективной плотности пикселей.
    • дескриптор плотности пикселей — положительное вещественное число, за которым сразу следует «x».

Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x.

Нельзя смешивать в одном атрибуте srcset дескрипторы ширины и дескрипторы плотности пикселей. Повторяющиеся дескрипторы (например, два источника, описанные с помощью «2x» в одном srcset) также являются некорректными.

Браузеры могут выбирать любой из указанных источников по своему усмотрению. Это даёт им значительную свободу действий, чтобы адаптировать выбор на основе таких вещей, как предпочтения пользователя или скорость соединения.

width
Ширина изображения в пикселях. В HTML 4, ширина могла быть определена в пикселях или в процентах. В HTML5 значение может быть определено только в пикселях.
usemap
Фрагмент URL (начинающийся с '#') карты изображения, ассоциированной с элементом.

Примечание: Этот атрибут нельзя использовать, если элемент <img> является потомком элемента <a> или <button>.

vspace Устарело HTML4.01, Вышла из употребления с версии HTML5
Задаёт вертикальный отступ от изображения в пикселях.  В HTML5 в качестве замены следует использовать CSS-свойство margin.

Поддерживаемые форматы изображений

Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться браузерами. Поэтому разные браузеры поддерживают разные наборы форматов. Например, Gecko поддерживает следующие:

Взаимодействие с CSS

С точки зрения CSS, элемент <img> является заменяемым элементом. Он не имеет базовой линии, поэтому, когда изображения используются в инлайн контексте с vertical-align: baseline, то нижняя часть изображения будет размещена на базовой линии контейнера.

В зависимости от типа, изображения могут иметь intrinsic ширину и высоту. Однако intrinsic размеры не являются необходимыми для некоторых типов изображений. Например, SVG изображения могут не иметь intrinsic размеров, если их корневой <svg> элемент не определяет width или height.

Ошибки

Если в процессе загрузки или отображения изображения происходит ошибка и обработчик onerror установлен для обработки событий error, то вызывается этот обработчик. Это может произойти, в том числе, в следующих ситуациях:

  • Атрибут src пустой или равен null.
  • URL атрибута src совпадает с текущим URL страницы.
  • Изображение повреждено каким-либо образом, что предотвращает его загрузку.
  • Метаданные изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <img> размеры также не были указаны.
  • Изображение имеет формат, который не поддерживается user agent.

Примеры

Пример 1:  Альтернативный текст

<img src="mdn-logo-sm.png" alt="MDN">

MDN

Пример 2: Картинка-ссылка

<a href="/">MDN<img src="mdn-logo-sm.png" alt="MDN"></a>

MDN

Пример 3: Использование атрибута srcset

Атрибут src является 1x кандидатом в браузерах, поддерживающих srcset.

 <img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">

Пример 4: Использование атрибутов srcset и sizes

Атрибут src игнорируется браузерами, которые поддерживают атрибут srcset, при использовании дескрипторов «w» в последнем. Если выполнен медиа-запрос (max-width: 600px), то ширина изображения будет равна 200px, иначе она будет равна 50vw (50% ширины viewport).

 <img src="clock-demo-thumb-200.png"
      alt="Clock"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

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

Спецификация Статус Комментарий
Referrer Policy
Определение 'referrer attribute' в этой спецификации.
Кандидат в рекомендации Добавлен атрибут referrerpolicy.
HTML Living Standard
Определение '<img>' в этой спецификации.
Живой стандарт  
HTML5
Определение '<img>' в этой спецификации.
Рекомендация  
HTML 4.01 Specification
Определение '<img>' в этой спецификации.
Рекомендация

 

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка Да Да Да Да Да Да
align Да Да Да Да Да Да
alt Да Да Да Да Да Да
border Да Да Да Да Да Да
crossorigin Да Да Да Да Да Да
height Да Да Да Да Да Да
hspace Да Да Да Да Да Да
ismap Да Да Да Да Да Да
longdesc Да Да Да Да Да Да
name Да Да Да Да Да Да
onerror Да ?51 ? Да Да
referrerpolicy51 Нет50 Нет38 ?
sizes Да Да Да Да Да Да
src Да Да Да Да Да Да
srcset34 Да

38

32 — 521

Нет218
usemap Да Да Да Да Да Да
vspace Да Да Да Да Да Да
width Да Да Да Да Да Да
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да Да Да Да Да
align Да Да Да Да Да Да Да
alt Да Да Да Да Да Да Да
border Да Да Да Да Да Да Да
crossorigin Да Да Да Да Да Да Да
height Да Да Да Да Да Да Да
hspace Да Да Да Да Да Да Да
ismap Да Да Да Да Да Да Да
longdesc Да Да Да Да Да Да Да
name Да Да Да Да Да Да Да
onerror Да Да ?51 Да Да Да
referrerpolicy5151 Нет5038 ?5.0
sizes Да Да Да Да Да Да Да
src Да Да Да Да Да Да Да
srcset3434 Да

38

32 — 521

218 Да
usemap Да Да Да Да Да Да Да
vspace Да Да Да Да Да Да Да
width Да Да Да Да Да Да Да

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

См. также

Метки документа и участники

Внесли вклад в эту страницу: dima74, secondfry, ZVanoZ, Aleksej, solovyev
Обновлялась последний раз: dima74,