<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>' в этой спецификации.
Рекомендация

 

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
align
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
altChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
border
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
crossoriginChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
decodingChrome Полная поддержка ДаEdge ? Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 63Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
heightChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
hspace
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
ismapChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
longdescChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
name
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
onerror
Устаревшая
Chrome Полная поддержка ДаEdge ? Firefox Полная поддержка 51IE ? Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 51Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
referrerpolicyChrome Полная поддержка 51Edge Нет поддержки НетFirefox Полная поддержка 50IE Нет поддержки НетOpera Полная поддержка 38Safari Полная поддержка 11.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 50Opera Android Полная поддержка 38Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.2
sizesChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
srcChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
srcsetChrome Полная поддержка 34Edge Полная поддержка ДаFirefox Полная поддержка 38
Полная поддержка 38
Нет поддержки 32 — 52
Отключено
Отключено 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.
IE Нет поддержки НетOpera Полная поддержка 21Safari Полная поддержка 8WebView Android Полная поддержка 37Chrome Android Полная поддержка 34Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 38
Полная поддержка 38
Нет поддержки 32 — 52
Отключено
Отключено 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.
Opera Android Полная поддержка 21Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка Да
usemapChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
vspace
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
widthChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

См. также

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

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