<img>

Резюме

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

• Категории контента Flow content, текстовый контент, embedded content, palpable content. Если элемент имеет атрибут usemap, он также принадлежит к категории интерактивного контента.
• Допустимое содержимое Нет, так как это пустой элемент.
• Опущение теговНачальный обязателен, конечного быть не должно.
• Допустимые родительские элементы Any element that accepts embedded content.
• Интерфейс DOM HTMLImageElement

Атрибуты

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

align Устарело HTML4.01, Вышла из употребления с версии HTML5 Use the vertical-align CSS property

Выравнивание изображения относительно окружающего его контекста.

alt

С помощью этого атрибута задается альтернативный текст для изображения. Он будет показан вместо изображения, если URL изображения неправилен, формат изображения не поддерживается, или если оно ещё не загружено.

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

border Устарело HTML4.01, Вышла из употребления с версии HTML5

Ширина рамки вокруг изображения.

crossorigin HTML5

Этот enumerated атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, не ограничивая функциональность последних (англ. tainted 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.

height

Задает intrinsic высоту изображения HTML5 в пикселях, HTML 4 в пикселях или процентах.

hspace Устарело HTML4.01, Вышла из употребления с версии HTML5

Задает горизонтальный отступ от изображения в пикселях.

ismap

Булев атрибут, определяющий, является ли изображение фрагментом карты. Если задано значение true, при клике на картинку точные координаты клика передаются на сервер.

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

longdesc

URL более длинного, чем в alt, описания изображения (дополняющего alt).

name Устарело HTML4.01, Вышла из употребления с версии HTML5

Имя элемента. Поддерживается только в HTML 4 для обратной совместимости. В настоящее время рекомендуется использовать атрибут id.

sizesHTML5

Позволяет задать размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:

1. a media condition. This must be omitted for the last item.
2. a source size value.

Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width ('w') descriptors. The selected source size affects the intrinsic size of the image (the image’s display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.

src

Обязательный атрибут, в котором указывается URL файла изображения. В браузерах, поддерживающих элемент srcset, src используется как изображение-кандидат с a pixel density descriptor 1x, если в srcset не определено изображения с таким pixel density descriptor и srcset не содержит «w»-дескрипторов.

srcsetHTML5

Может использоваться вместо src и позволяет задавать различные URL изображений. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:

1. URL файла с изображением,
2. optionally, whitespace followed by one of:
   • значение ширины viewport (им должно быть положительное целое число, за которым следует символ «w»). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
   • значение плотности пикселей (положительное число, за которым следует символ «x»), по умолчанию равно 1x.

Если не указано ни одного descriptor, the source is assigned the default descriptor: 1x.

Нельзя смешивать в одном атрибуте srcset width descriptors и pixel density descriptors. Duplicate descriptors (for instance, two sources in the same srcset which are both described with '2x') are invalid, too.

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

width

Intrinsic ширина изображения в CSS-пикселях HTML5, или в HTML 4 в пикселях или процентах.

usemap

Фрагмент URL (начинающийся с '#') карты изображения, ассоциированной с элементом.

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

vspace Устарело HTML4.01, Вышла из употребления с версии HTML5

Вертикальный отступ от изображения в пикселях сверху и снизу.

Поддерживаемые графические форматы

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

• JPEG
• GIF, включая анимированные изображения
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO

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

С точки зрения CSS, элемент <img> является заменяемым элементом. It has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be posed on the container's baseline.

Depending on its type, an image may have an intrinsic width and height, but will not necessarily have them. For instance, SVG images have no intrinsic dimensions.

Пример 1

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

Пример 2: Image link

<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>

Пример 3: атрибут srcset

The src attribute is a 1x candidate in user agents that support srcset.

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

Пример 4: атрибуты srcset и sizes

The src attribute is ignored in user agents that support srcset when using 'w' descriptors. When the (min-width: 600px) media condition matches, the image will be 200px wide, otherwise it will be 50vw wide (50% of the viewport width).

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

Specifications

Browser compatibility

См. также

• <picture>, <object> and <embed> elements