Резюме
<img> — элемент HTML, предназначенный для описания изображений.
Примечание:
Браузеры не всегда показывают изображение, указанное в этом элементе. Например, если браузер неграфический (включая используемые людьми с нарушениями зрения), или если пользователь указал не показывать изображения, или если браузер не может показать изображение, потому что файл испорчен или в неподдерживаемом формате. В таких случаях браузер может заменить изображение текстом, определённым в атрибуте alt элемента.
- Категории контента Flow content, текстовый контент, embedded content, palpable content. Если элемент имеет атрибут {{htmlattrxref("usemap", "img")}}, он также принадлежит к категории интерактивного контента.
- Допустимое содержимое Нет, так как это {{Glossary("empty element", "пустой элемент")}}.
- Опущение теговНачальный обязателен, конечного быть не должно.
- Допустимые родительские элементы Any element that accepts embedded content.
- Интерфейс DOM {{domxref("HTMLImageElement")}}
Атрибуты
Кроме перечисленных ниже, к элементу также применимы глобальные атрибуты.
- {{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} Use the {{cssxref('vertical-align')}} CSS property
- Выравнивание изображения относительно окружающего его контекста.
- {{htmlattrdef("alt")}}
- С помощью этого атрибута задается альтернативный текст для изображения. Он будет показан вместо изображения, если URL изображения неправилен, формат изображения не поддерживается, или если оно ещё не загружено.
Примечание: Опущение этого атрибута означает, что изображение является ключевой частью контента, но для него нет текстового эквивалента. Если же значение атрибута — пустая строка, это значит, что изображение не является ключевой частью контента; тогда невизуальные браузеры имеют право совсем его не отображать.
- {{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- Ширина рамки вокруг изображения.
- {{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}
- Этот enumerated атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах {{HTMLElement("canvas")}}, не ограничивая функциональность последних (англ. tainted canvas). У этого атрибута есть 2 допустимых значения:
- anonymous
- В этом случае перед загрузкой изображения выполняется cross-origin запрос (т.е., используется
Origin:HTTP header). Однако, при этом не передаются параметры доступа (ни cookie, ни сертификат X.509, ни логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовокAccess-Control-Allow-Origin:HTTP header, иначе использование изображения в {{HTMLElement("canvas")}} ограничивается. - use-credentials
- Перед загрузкой изображения выполняется cross-origin запрос (
Origin:HTTP header) с указанием параметров доступа (в виде cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовокAccess-Control-Allow-Origin:HTTP header, иначе использование изображения в {{HTMLElement("canvas")}} ограничивается.
Origin:HTTP header), и использование изображения в {{HTMLElement('canvas')}} ограничивается всегда. При неверном значении атрибута (например, при опечатке), используется значение anonymous. Для дополнительной информации обратитесь к статье CORS settings attributes. - {{htmlattrdef("height")}}
- Задает intrinsic высоту изображения {{HTMLVersionInline(5)}} в пикселях, {{HTMLVersionInline(4)}} в пикселях или процентах.
- {{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- Задает горизонтальный отступ от изображения в пикселях.
- {{htmlattrdef("ismap")}}
- Булев атрибут, определяющий, является ли изображение фрагментом карты. Если задано значение true, при клике на картинку точные координаты клика передаются на сервер.
Примечание: Этот атрибут допустим только когда элемент
<img>является потомком элемента {{htmlelement("a")}} с валидным атрибутом {{htmlattrxref("href","a")}}. - {{htmlattrdef("longdesc")}} только {{HTMLVersionInline(4)}}
- URL более длинного, чем в alt, описания изображения (дополняющего alt). В {{HTMLVersionInline(5)}} для этих целей рекомендуется использовать обычный элемент {{HTMLElement("a")}}.
- {{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- Имя элемента. Поддерживается только в {{HTMLVersionInline(4)}} для обратной совместимости. В настоящее время рекомендуется использовать атрибут id.
- {{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}
- Позволяет задать размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:
- a media condition. This must be omitted for the last item.
- 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
srcsetattribute, 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 thesrcsetattribute is absent, or contains no values with a width descriptor, then thesizesattribute has no effect. - {{htmlattrdef("src")}}
- Обязательный атрибут, в котором указывается URL файла изображения. В браузерах, поддерживающих элемент srcset, src используется как изображение-кандидат с a pixel density descriptor
1x, если вsrcsetне определено изображения с таким pixel density descriptor иsrcsetне содержит «w»-дескрипторов. - {{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}
- Может использоваться вместо src и позволяет задавать различные URL изображений. Значением атрибута является одна или несколько строк, разделенных запятой. В состав каждой строки входят:
- URL файла с изображением,
- optionally, whitespace followed by one of:
- значение ширины viewport (им должно быть положительное целое число, за которым следует символ «
w»). The width descriptor is divided by the source size given in thesizesattribute to calculate the effective pixel density. - значение плотности пикселей (положительное число, за которым следует символ «
x»), по умолчанию равно1x.
- значение ширины viewport (им должно быть положительное целое число, за которым следует символ «
Если не указано ни одного descriptor, the source is assigned the default descriptor:
1x.Нельзя смешивать в одном атрибуте
srcsetwidth descriptors и pixel density descriptors. Duplicate descriptors (for instance, two sources in the samesrcsetwhich are both described with '2x') are invalid, too.User agent'ы могут выбирать любой из указанных источников, что даёт им относительную свободу выбора на основании, к примеру, пользовательских настроек и скорости соединения.
- {{htmlattrdef("width")}}
- Intrinsic ширина изображения в CSS-пикселях {{HTMLVersionInline(5)}}, или в {{HTMLVersionInline(4)}} в пикселях или процентах.
- {{htmlattrdef("usemap")}}
- Фрагмент URL (начинающийся с '#') карты изображения, ассоциированной с элементом.
Примечание: Этот атрибут нельзя использовать, если элемент
<img>является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}. - {{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- Вертикальный отступ от изображения в пикселях сверху и снизу.
Поддерживаемые графические форматы
Стандарт HTML не содержит требований, какие графические форматы должны поддерживаться браузером. Поэтому разные браузерные движки поддерживают разные наборы форматов. К примеру, Gecko поддерживает следующие:
- JPEG
- GIF, включая анимированные изображения
- PNG
- APNG {{gecko_minversion_inline("1.9.2")}}
- SVG {{gecko_minversion_inline("2.0")}}
- BMP
- BMP ICO
- PNG ICO {{gecko_minversion_inline("9.0")}}
Note:
Поддержка формата XBM была удалена в Gecko 1.9.2.
Взаимодействие с CSS
Касательно CSS, элемент <img> является заменяемым элементом. It has no baseline, so when images are used in an inline formatting context with {{cssxref("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
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}} | {{Spec2('HTML5 W3C')}} | |
| {{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| srcset attribute | {{CompatChrome(34.0)}} | {{CompatGeckoDesktop("32.0")}} (behind a pref) | {{CompatNo}} | {{CompatOpera(21)}} | {{CompatSafari(7.1)}} |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| srcset attribute | Chrome 34 | {{CompatNo}} | {{CompatNo}} | 21 | iOS 8 |
See also
- {{HTMLElement("picture")}}, {{HTMLElement("object")}} and {{HTMLElement("embed")}} elements