MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Резюме

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

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

  • Категории контента 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.
    • значение плотности пикселей (положительное число, за которым следует символ «), по умолчанию равно 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 поддерживает следующие:

Note:
Поддержка формата XBM была удалена в Gecko 1.9.2.

Взаимодействие с 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">

MDN

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

MDN

Пример 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

Specification Status Comment
WHATWG HTML Living Standard
Определение '<img>' в этой спецификации.
Живой стандарт  
HTML5
Определение '<img>' в этой спецификации.
Рекомендация  
HTML 4.01 Specification
Определение '<img>' в этой спецификации.
Рекомендация  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да) (Да) (Да) (Да) (Да)
Атрибут srcset 34.0 32.0 (32.0) (надо включать в настройках) Нет 21 7.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) (Да) (Да)
Атрибут srcset Chrome 34 Нет Нет 21 iOS 8

См. также

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

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