HTML-элемент<img> встраивает изображение в документ. Этозамещаемый элемент.

Интерактивный пример

<img   src="/shared-assets/images/examples/grapefruit-slice.jpg"  alt="Grapefruit slice atop a pile of other slices" />

.fit-picture {  width: 250px;}

Приведённый выше пример показывает очень простое использование элемента<img>. Атрибутsrc обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибутalt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:

• управление Referrer/CORS в целях безопасности. Смотрите ниже атрибутыcrossorigin иreferrerpolicy;
• настройкавнутреннего размера с использованиемwidth иheight, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
• адаптивные изображения рекомендуется использовать с атрибутамиsizes иsrcset (смотрите также элемент<picture> и наше руководство "Адаптивные изображения").

Поддерживаемые форматы изображений

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

Firefox

Форматы изображений, поддерживаемые Firefox:

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

Ошибки загрузки изображения

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик событияonerror был настроен на обработку событияerror, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

• атрибутsrc пустой илиnull;
• указанныйURL в атрибутеsrc совпадает с URL страницы, на которой в данный момент находится пользователь;
• указанное изображение каким-то образом повреждено, что препятствует его загрузке;
• метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента<img> не было указано никаких размеров;
• указанное изображение имеет формат, который не поддерживаетсяпользовательским агентом.

Атрибуты

К этому элементу применимыглобальные атрибуты.

alt

Этим атрибутом задаётся альтернативное текстовое описание изображения.

Примечание:Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный илинеподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибутеalt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибутеalt.[!NOTE]Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt="") указывает, что это изображениене является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его прирендеринге.

crossorigin

Этот атрибут указывает, следует ли использоватьCORS при загрузке изображения или нет.Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе<canvas> не будучи "испорченными". Допустимые значения:

• anonymous: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin) выполняется, но параметры доступа не передаются (т.е. нетcookie, не используетсястандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовокAccess-Control-Allow-Origin), изображение будет "испорчено" и его использование будет ограничено;
• use-credentials: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin) выполняется вместе с передачей параметров доступа (т.е. естьcookie, используетсястандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовкаAccess-Control-Allow-Origin), изображение будет "испорчено" и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовкаOrigin), ограничивая его использование в элементе<canvas>. Если задан неправильно, то он обрабатывается так, как если бы использовалось значениеanonymous. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".

decoding

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:

• sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;
• async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
• auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.

height

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

importanceЭкспериментальная возможность

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:

• auto: Указывает наотсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;
• high: Указывает браузеру, что изображение имеетвысокий приоритет;
• low: Указывает браузеру, что изображение имеетнизкий приоритет.

intrinsicsizeЭкспериментальная возможность

Этот атрибут говорит браузеру игнорировать действительныйвнутренний размер изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, аnarutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте.Объяснение,примеры.

ismap

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

Примечание:Этот атрибут разрешён, только если элемент<img> является потомком элемента<a> с валидным (соответствующий требованиям) атрибутомhref.

loadingЭкспериментальная возможность

Указывает на то, как браузер должен загрузить изображение:

• eager: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
• lazy: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.

  Примечание:Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.

referrerpolicyЭкспериментальная возможность

Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:

• no-referrer: ЗаголовокReferer не будет отправлен;
• no-referrer-when-downgrade: ЗаголовокReferer не отправляется, когда происходит переход к источнику безTLS (HTTPS). Это поведение по умолчанию дляпользовательских агентов, если не указано иное;
• origin: ЗаголовокReferer будет содержать схему адресации ресурса (HTTP, HTTPS,FTP и т.д),хост ипорт;
• origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса,хостом ипортом, в то время как переход из того же источника будет включать полный путь реферала;
• unsafe-url: ЗаголовокReferer будет включать источник и путь, но не фрагментURL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённыхTLS, к незащищённым источникам.

sizes

Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения.Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутомsrcset, если эти источники описываются с помощью дескриптора ширины 'w' (сокращение от width). Выбранный размер источника влияет навнутренний размер изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибутsrcset отсутствует или не содержит значений с дескриптором 'w', то атрибутsizes не будет иметь никакого эффекта.

src

URL изображения. Этот атрибут является обязательным для элемента<img>. В браузерах, поддерживающихsrcset,src обрабатывается как изображение-кандидат с дескриптором плотности пикселей1x, если только изображение с этим дескриптором уже не определено вsrcset или еслиsrcset не содержит дескрипторы 'w'.

srcset

Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использованияпользовательскими агентами. Каждая строка состоит из:1.URL изображения. 2. Необязательного, пробела, сопровождаемого:

• дескриптором ширины или положительным целым числом, за которым сразу же следует 'w'. Дескриптор ширины делится на размер источника, полученный из атрибутаsizes, для расчёта эффективной плотности пикселей;
• дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует 'x'.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию:1x.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибутеsrcset. Повторение дескрипторов (например, два источника в одномsrcset с одинаковым дескриптором '2x') так же является недопустимым.Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя илипропускная способность. Смотрите наше руководство "Адаптивные изображения" для примера.

width

Внутренняя ширина (см.Внутренний размер) изображения в пикселях.

usemap

НеполныйURL (начиная с '#')карты-изображения, связанной с элементом.

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

Устаревшие атрибуты

align

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойстваfloat и/илиvertical-align. Вы можете так же использовать CSS-свойство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.

border

Ширина рамки вокруг изображения. Вы должны использовать CSS-свойствоborder вместо этого атрибута.

hspace

Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойствоmargin вместо этого атрибута.

longdesc

Ссылка на более подробное описание изображения. Возможными значениями являютсяURL илиid элемента.

Примечание:Этот атрибут упомянут в последней версии отW3C,HTML 5.2, но был удалён изживого стандарта HTML отWHATWG. У него неопределённое будущее; авторы должны использовать альтернативыWAI-ARIA, такие какaria-describedby илиaria-details.

name

Имя для элемента. Вы должны использовать атрибутid вместо этого атрибута.

vspace

Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойствоmargin вместо этого атрибута.

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

<img> являетсязамещаемым элементом; по умолчанию он имеет значение свойстваdisplay равноеinline, но его размеры по умолчанию определяются внутренними значениями (см.внутренний размер) встроенного изображения. Вы можете установить на изображение такие свойства, какborder/border-radius,padding/margin,width/height и так далее.

Однако, часто бывает полезно установить для изображений свойствоdisplay в значениеblock, так что вы имеете максимальный контроль над стилизацией (например,margin: 0 auto не работает на изображениях сdisplay: inline, легче размещать изображения в контексте с окружающими элементами, когда они являютсяблочными).

У<img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе сvertical-align: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.

Вы можете использовать свойствоobject-position для позиционирования изображения внутри границ элемента<img> и свойствомobject-fit регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менеевнутренние размеры не обязательны.SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента<svg> не заданыwidth иheight.

Примеры

Альтернативный текст

Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.

<img  src="/shared-assets/images/examples/web-docs-sprite.svg"  alt="Логотип MDN - изображение динозавра с текстом MDN web docs" />

Изображение-ссылка

Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег<img> внутрь элемента<a>. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.

<a href="https://developer.mozilla.org">  <img    src="/shared-assets/images/examples/web-docs-sprite.svg"    alt="Посетить сайт MDN" /></a>

Использование атрибута srcset

В этом примере мы добавляем атрибутsrcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения вsrc на устройствах с высоким разрешением. Изображение указанное в атрибутеsrc, считается1x кандидатом впользовательских агентах, которые поддерживаютsrcset.

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

Использование атрибутов srcset и sizes

Атрибутsrc игнорируется впользовательских агентах, которые поддерживают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, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.

• Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
• Альтернативные тексты: максимальное руководство — Axess Lab.
• Как создать отличный альтернативный текст: введение | Deque.
• MDN Понимание WCAG, Руководство 1.1. объяснения.
• Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.

Атрибут title

Атрибутtitle не является приемлемой заменой атрибутаalt. Кроме того, избегайте повторения значения атрибутаalt в атрибутеtitle, объявленном на том же изображении.

Атрибутtitle также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент<figure> вместе с элементом<figcaption>.

• Использование HTML-атрибута title - обновлено | The Paciello Group.

Спецификации

Совместимость с браузерами

Смотрите также

• Изображения в HTML.
• Адаптивные изображения.
• Элементы<picture>,<object> и<embed>.
• Связанные с изображениями CSS-свойства:object-fit,object-position,image-orientation,image-rendering, иimage-resolution.