HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:
crossorigin и referrerpolicy;width и height, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;sizes и srcset (смотрите также элемент {{htmlelement("picture")}} и наше руководство "Адаптивные изображения").| Категории контента | Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут usemap, он так же принадлежит к категории интерактивного контента. |
|---|---|
| Разрешённое содержимое | Никакое, так как это {{Glossary("empty element", "пустой элемент")}}. |
| Пропуск тега | Должен иметь открывающий тег и не должен иметь закрывающий. |
| Разрешённые родительские элементы | Любой элемент, который разрешает встроенный контент в качестве содержимого. |
| Разрешённые роли ARIA | Любые |
| DOM-интерфейс | {{domxref("HTMLImageElement")}} |
Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные {{glossary("user agent","пользовательские агенты")}} поддерживают разные наборы форматов.
Форматы изображений, поддерживаемые Firefox:
Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события {{htmlattrxref("onerror")}} был настроен на обработку события {{event("error")}}, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:
src пустой или {{glossary("null")}};src совпадает с URL страницы, на которой в данный момент находится пользователь;<img> не было указано никаких размеров;К этому элементу применимы глобальные атрибуты.
Этим атрибутом задаётся альтернативное текстовое описание изображения.
Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt.
Примечание: Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt="") указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.
Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "испорченными". Допустимые значения:
anonymous: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "испорчено" и его использование будет ограничено;use-credentials: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется вместе с передачей параметров доступа (т.е. есть {{glossary("cookie")}}, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "испорчено" и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".
Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:
sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:
auto: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;high: Указывает браузеру, что изображение имеет высокий приоритет;low: Указывает браузеру, что изображение имеет низкий приоритет.narutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
Примечание: Этот атрибут разрешён, только если элемент <img> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.
Указывает на то, как браузер должен загрузить изображение:
eager: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).lazy: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
no-referrer: Заголовок {{httpheader("Referer")}} не будет отправлен;no-referrer-when-downgrade: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;origin: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;unsafe-url: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:
Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset, если эти источники описываются с помощью дескриптора ширины 'w' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором 'w', то атрибут sizes не будет иметь никакого эффекта.
<img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы 'w'.Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:
w'. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчёта эффективной плотности пикселей;x'.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x.
Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором '2x') так же является недопустимым.
{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "Адаптивные изображения" для примера.
Неполный {{glossary("URL")}} (начиная с '#') карты-изображения, связанной с элементом.
Примечание: вы не можете использовать этот атрибут, если элемент <img> является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.
Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <img>. Допустимые значения:
top: Аналог vertical-align: top или vertical-align: text-top;middle: Аналог vertical-align: -moz-middle-with-baseline;bottom: Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial;left: Аналог float: left;right: Аналог float: right.Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.
Примечание: Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, HTML 5.2, но был удалён из живого стандарта HTML от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как aria-describedby или aria-details.
<img> является замещаемым элементом; по умолчанию он имеет значение свойства {{cssxref("display")}} равное inline, но его размеры по умолчанию определяются внутренними значениями (см. {{glossary("Intrinsic Size", "внутренний размер")}}) встроенного изображения. Вы можете установить на изображение такие свойства, как {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}/{{cssxref("height")}} и так далее.
Однако, часто бывает полезно установить для изображений свойство {{cssxref("display")}} в значение block, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).
У <img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе с {{cssxref("vertical-align")}}: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.
Вы можете использовать свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <img> и свойством {{cssxref("object-fit")}} регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).
В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее {{glossary("Intrinsic Size", "внутренние размеры")}} не обязательны. {{glossary("SVG")}}-изображения, например, могут не иметь внутренних размеров, если для корня их элемента {{SVGElement("svg")}} не заданы width и height.
Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
alt="Логотип MDN - изображение динозавра с текстом MDN web docs">
{{ EmbedLiveSample('Альтернативный_текст', '100%', '70') }}
Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <img> внутрь элемента {{HTMLElement("a")}}. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.
<a href="https://developer.mozilla.org">
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
alt="Посетить сайт MDN">
</a>
{{ EmbedLiveSample('Изображение-ссылка', '100%', '70') }}
В этом примере мы добавляем атрибут srcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src, считается 1x кандидатом в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают srcset.
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x">
Атрибут src игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают srcset, когда добавлены дескрипторы 'w'. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.
<img src="clock-demo-thumb-200.png"
alt="Часы"
srcset="clock-demo-thumb-200.png 200w,
clock-demo-thumb-400.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Хотя у элементов <img> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "Заголовок Referer: проблемы приватности и безопасности" для получения дополнительной информации.
Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.
<img alt="image" src="penguin.jpg">
<img alt="Пингвин на пляже." src="penguin.jpg">
Когда у изображения отсутствует атрибут alt, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.
Атрибут {{htmlattrxref("title")}} не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.
Атрибут {{htmlattrxref("title")}} также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент {{HTMLElement("figure")}} вместе с элементом {{HTMLElement("figcaption")}}.
| Спецификация | Статус | Комментарий |
|---|---|---|
| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} | {{Spec2('Referrer Policy')}} | Добавлен атрибут referrerpolicy. |
| {{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')}} |
|
{{Compat("html.elements.img")}}