<img> HTML-элемент для встраивания изображений

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

Попробуйте

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

.fit-picture {
  width: 250px;
}

В приведённом выше примере показано использование элемента <img>:

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

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

• Управление источником перехода/CORS для обеспечения безопасности и конфиденциальности: см. crossorigin и referrerpolicy.
• Используйте атрибуты width и height вместе, чтобы задать собственный размер изображения и выделить для него место до загрузки, предотвращая смещение макета.
• Подсказки для адаптивных изображений с помощью атрибутов sizes и srcset (см. также элемент <picture> и наше руководство по адаптивным изображениям).

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

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

В интернете чаще всего используются следующие форматы файлов изображений:

• APNG (анимированная переносимая сетевая графика) — хороший выбор для последовательностей анимации без потерь (GIF работает менее эффективно)
• AVIF (формат файлов изображений AV1) — хороший выбор как для изображений, так и для анимированных изображений благодаря высокой производительности.
• GIF (формат обмена графикой) — хороший выбор для простых изображений и анимации.
• JPEG (изображение Joint Photographic Experts Group) — хороший выбор для сжатия фотографий с потерями (на данный момент это самый популярный формат).
• PNG (переносимая сетевая графика) — хороший выбор для сжатия изображений без потерь (качество немного выше, чем у JPEG).
• SVG (масштабируемая векторная графика) — векторный формат изображений. Используйте его для изображений, которые должны точно отображаться в разных размерах.
• WebP (формат Web Picture) — отличный выбор как для изображений, так и для анимированных изображений

Рекомендуется использовать такие форматы, как WebP и AVIF, поскольку они обеспечивают гораздо более высокую производительность, чем PNG, JPEG и GIF, как для статичных, так и для анимированных изображений.

SVG по-прежнему остаётся рекомендуемым форматом для изображений, которые должны точно отображаться в разных размерах.

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

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

• Атрибуты src или srcset пусты ("") или null.
• src URL совпадает с URL страницы, на которой сейчас находится пользователь.
• Изображение повреждено, и это препятствует его загрузке.
• Метаданные изображения повреждены настолько, что невозможно определить его размеры, и размеры не заданы в атрибутах элемента <img>.
• Формат изображения не поддерживается пользовательским агентом.

Атрибуты

Этот элемент включает глобальные атрибуты.

alt

Задаёт текст, который может заменить изображение на странице.

Примечание: Браузеры не всегда отображают изображения. Существует ряд ситуаций, в которых браузер может не отображать изображения, например:

• Невизуальные браузеры (например, используемые людьми с нарушениями зрения)
• Пользователь выбирает не отображать изображения (для экономии трафика или по соображениям конфиденциальности)
• Изображение недействительно или имеет неподдерживаемый формат

В этих случаях браузер может заменить изображение текстом из атрибута alt элемента. По этим и другим причинам по возможности задавайте полезное значение для alt.

Если задать этому атрибуту пустую строку (alt=""), это означает, что изображение не является важной частью содержимого (это декоративное изображение или пиксель отслеживания), и невизуальные браузеры могут не включать его в отрисовку. Визуальные браузеры также скроют значок сломанного изображения, если атрибут alt пуст и изображение не удалось отобразить.

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

attributionsrc

Указывает, что браузер должен отправить заголовок Attribution-Reporting-Eligible вместе с запросом изображения.

На стороне сервера это используется для отправки в ответе заголовка Attribution-Reporting-Register-Source или Attribution-Reporting-Register-Trigger, чтобы зарегистрировать источник атрибуции на основе изображения или триггер атрибуции на основе изображения соответственно. Выбор заголовка ответа зависит от значения заголовка Attribution-Reporting-Eligible, вызвавшего регистрацию.

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

Примечание: Подробнее см. в API Attribution Reporting.

Можно задать две версии этого атрибута:

• Логическое значение, то есть только имя attributionsrc. Это означает, что заголовок Attribution-Reporting-Eligible нужно отправить на тот же сервер, на который указывает атрибут src. Это подходит, если регистрация источника атрибуции или триггера обрабатывается на том же сервере. При регистрации триггера атрибуции это свойство необязательно; если его не указать, будет использовано логическое значение.
• Значение, содержащее один или несколько URL-адресов, например:

<img
  src="image-file.png"
  alt="My image file description"
  attributionsrc="https://a.example/register-source
                     https://b.example/register-source" />

Это полезно, если запрашиваемый ресурс находится на сервере, который вы не контролируете, или если вы хотите обрабатывать регистрацию источника атрибуции на другом сервере. В этом случае в качестве значения attributionsrc можно указать один или несколько URL-адресов. При запросе ресурса заголовок Attribution-Reporting-Eligible будет отправлен на URL-адреса, указанные в attributionSrc, а также на источник ресурса. Затем эти URL-адреса могут ответить заголовком Attribution-Reporting-Register-Source или Attribution-Reporting-Register-Trigger, чтобы завершить регистрацию.

Примечание: Указание нескольких URL-адресов означает, что для одной функции можно зарегистрировать несколько источников атрибуции. Например, вы можете измерять успешность разных кампаний, для которых создаются разные отчёты на основе разных данных.

crossorigin

Указывает, следует ли получать изображение с помощью запроса CORS. Данные изображения, полученного в результате запроса CORS с включённым CORS, можно повторно использовать в элементе <canvas> без пометки «загрязнено».

Если атрибут crossorigin не указан, отправляется запрос без CORS (без заголовка запроса Origin), браузер помечает изображение как загрязнённое и ограничивает доступ к его данным, не позволяя использовать их в элементах <canvas>.

Если атрибут crossorigin указан, отправляется запрос CORS (с заголовком запроса Origin); однако если сервер не разрешает сайту-источнику доступ к данным изображения из другого источника (не отправляет заголовок ответа Access-Control-Allow-Origin или не включает источник сайта в отправляемый заголовок ответа Access-Control-Allow-Origin), браузер блокирует загрузку изображения и записывает ошибку CORS в консоль инструментов разработчика.

Допустимые значения:

anonymous

Отправляется запрос CORS без учётных данных (то есть без файлов cookie, сертификатов X.509 и заголовка запроса Authorization).

use-credentials

Запрос CORS отправляется со всеми учётными данными (то есть с файлами cookie, сертификатами X.509 и заголовком запроса Authorization). Если сервер не разрешает передавать учётные данные сайту-источнику (не отправляет заголовок ответа Access-Control-Allow-Credentials: true), браузер помечает изображение как загрязнённое и ограничивает доступ к его данным.

Если атрибут имеет недопустимое значение, браузеры обрабатывают его так, как если бы было указано значение anonymous. Дополнительные сведения см. в разделе атрибуты настройки CORS.

decoding

Этот атрибут подсказывает браузеру, следует ли декодировать изображение вместе с отрисовкой остального содержимого DOM за один этап отображения, что выглядит более «правильно» (sync), или сначала отрисовать и показать остальное содержимое DOM, а затем декодировать изображение и показать его позже (async). На практике async означает, что следующая отрисовка не ждёт декодирования изображения.

При использовании decoding на статических элементах <img> часто трудно заметить какой-либо эффект. Сначала они, скорее всего, будут отрисованы как пустые изображения, пока файлы изображений загружаются (из сети или кэша), а затем обрабатываются независимо, поэтому «синхронизация» обновлений содержимого менее заметна. Однако задержку отрисовки во время декодирования, хотя она часто и очень мала, можно измерить — даже если её трудно заметить невооружённым глазом. Более подробный анализ см. в статье Что на самом деле делает атрибут декодирования изображения? (tunetheweb.com, 2023).

Использование разных типов decoding может привести к более заметным различиям при динамической вставке элементов <img> в DOM с помощью JavaScript — подробнее см. HTMLImageElement.decoding.

Допустимые значения:

sync

Синхронно декодировать изображение вместе с отрисовкой остального содержимого DOM и показать всё одновременно.

async

Асинхронно декодировать изображение после отрисовки и отображения остального содержимого DOM.

auto

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

elementtiming

Помечает изображение для наблюдения с помощью API PerformanceElementTiming. Указанное значение становится идентификатором наблюдаемого элемента изображения. См. также страницу атрибута elementtiming.

fetchpriority

Задаёт подсказку относительно приоритета загрузки изображения. Допустимые значения:

high

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

low

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

auto

Не задавать предпочтительный приоритет загрузки. Это значение используется по умолчанию, если значение не указано или недопустимо.

height

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

Примечание: Указание height и width позволяет браузеру вычислить соотношение сторон изображения до его загрузки. Это соотношение используется для резервирования места, необходимого для отображения изображения, что уменьшает или даже предотвращает сдвиг макета после загрузки и отрисовки изображения на экране. Уменьшение сдвигов макета — важная составляющая хорошего пользовательского опыта и производительности веб-страниц.

ismap

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

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

loading

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

eager

Загружает изображение немедленно, независимо от того, находится ли оно в данный момент в визуальной области просмотра (это значение используется по умолчанию).

lazy

Откладывает загрузку изображения, пока оно не окажется на вычисленном браузером расстоянии от области просмотра.

Отложенная загрузка позволяет не тратить пропускную способность сети и хранилища на изображение до тех пор, пока не станет достаточно ясно, что оно понадобится. Это повышает производительность в большинстве типичных сценариев использования.

Для всех изображений рекомендуется явно задавать атрибуты width и height, чтобы избежать сдвига макета, но для изображений с отложенной загрузкой это особенно важно. Такие изображения никогда не будут загружены, если они не пересекаются с видимой частью элемента, даже если их загрузка изменила бы это положение, поскольку незагруженные изображения имеют width и height, равные 0. Это ещё сильнее ухудшает пользовательский опыт, если содержимое, видимое в области просмотра, смещается во время чтения.

Изображения с отложенной загрузкой, расположенные в визуальной области просмотра, могут быть ещё не видны в момент срабатывания события Window load. Это происходит потому, что событие срабатывает с учётом изображений, загружаемых немедленно: изображения с отложенной загрузкой не учитываются, даже если при первоначальной загрузке страницы они находятся в визуальной области просмотра.

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

referrerpolicy

Строка, указывающая, какой источник перехода использовать при загрузке ресурса:

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

sizes

Одно или несколько значений, разделённых запятыми; это могут быть размеры источника или ключевое слово auto. Согласно спецификации, атрибут sizes должен присутствовать только тогда, когда в srcset используются дескрипторы ширины.

размер источника

Размер источника состоит из следующего:

1. Условие для медиазапроса, которое опускается для последнего элемента списка.
2. Значение размера источника.

Например, следующий размер источника предлагает использовать изображение шириной 1000px, если ширина области просмотра составляет 500 пикселей или меньше.

(width <= 500px) 1000px

Условия медиазапросов описывают свойства области просмотра, а не изображения. Поскольку дескриптор размера источника задаёт ширину изображения при компоновке, условие медиазапроса обычно (но не обязательно) основывается на width.

Значения размера источника задают предполагаемый размер отображения изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, заданных атрибутом srcset, если эти источники описаны дескрипторами ширины (w). Значение w, заданное в sizes, определяет ширину изображения по умолчанию при компоновке. Если CSS отсутствует, браузер отображает изображение с этим размером независимо от физических размеров в пикселях загруженного файла.

Значением размера источника может быть любая неотрицательная длина. Нельзя использовать функции CSS, кроме математических функций. Единицы измерения интерпретируются так же, как в медиазапросах: все относительные единицы длины отсчитываются от корневого элемента документа, а не от элемента <img>. Например, значение em отсчитывается от корневого размера шрифта, а не от размера шрифта изображения. Значения процентов не допускаются. Если атрибут sizes не указан, его значение по умолчанию — 100vw (ширина области просмотра).

auto

Ключевое слово auto указывает, что браузер должен использовать ожидаемую ширину элемента после компоновки для выбора отображаемого изображения. То есть следует использовать фактический размер изображения, вычисленный после применения HTML и CSS при компоновке. Это допустимо только в сочетании с loading="lazy", поскольку предполагается, что к моменту загрузки изображения страница уже содержит CSS и другие сведения о компоновке.

Использование auto избавляет от необходимости дважды указывать условия медиазапросов для компоновки: один раз для самой компоновки, а другой — для выбора подходящего изображения для загрузки и отображения.

Если auto не удаётся определить — потому что браузер не поддерживает это значение или потому что размер изображения при компоновке ещё неизвестен, — браузер использует указанные в списке размеры источника, чтобы определить ширину, затем атрибуты width/height элемента и, наконец, внутренний размер по умолчанию для элементов <img>, заданный в таблице стилей пользовательского агента (300 × 150 пикселей).

Для лучшей обратной совместимости с браузерами, не поддерживающими auto, после auto можно указать резервные размеры в атрибуте sizes. Также следует задать атрибуты width и height элемента, соответствующие внутренним размерам наибольшего изображения в srcset, чтобы браузер мог зарезервировать место с правильным соотношением сторон:

<img
  loading="lazy"
  width="200"
  height="200"
  sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
  srcset="
    swing-200.jpg   200w,
    swing-400.jpg   400w,
    swing-800.jpg   800w,
    swing-1600.jpg 1600w
  "
  src="swing-400.jpg"
  alt="Kettlebell Swing" />

src

URL изображения. Для элемента <img> требуется указать как минимум один из атрибутов src и srcset. Если указан атрибут srcset, src используется одним из двух способов:

• как резервный вариант для браузеров, не поддерживающих srcset;
• если в srcset используется дескриптор «x», то src эквивалентен источнику с дескриптором плотности 1x; то есть изображение, указанное в src, используется на экранах с низкой плотностью пикселей (например, на обычных дисплеях с разрешением 72 или 96 точек на дюйм).

srcset

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

Каждая строка состоит из следующего:

1. URL изображения
2. При необходимости — пробел и одно из следующих значений:
   • Дескриптор ширины (положительное целое число, за которым непосредственно следует w). Он должен соответствовать внутренней ширине указанного изображения. Дескриптор ширины делится на размер источника, заданный в атрибуте sizes, чтобы вычислить эффективную плотность пикселей. Например, чтобы указать ресурс изображения для случая, когда механизму отрисовки нужно изображение шириной 450 пикселей, используйте дескриптор ширины 450w. Если атрибут srcset содержит дескрипторы «w», браузер использует эти дескрипторы вместе с атрибутом sizes для выбора ресурса.
   • Дескриптор плотности пикселей (положительное число с плавающей запятой, за которым непосредственно следует x). Он задаёт условие плотности пикселей дисплея, при котором следует использовать соответствующий ресурс изображения. Например, чтобы указать ресурс изображения для случая, когда плотность пикселей вдвое выше стандартной, используйте дескриптор плотности пикселей 2x или 2.0x.

Если дескриптор не указан, источнику присваивается дескриптор по умолчанию 1x. Использовать дескрипторы ширины и плотности пикселей одновременно в одном атрибуте srcset нельзя. Повторяющиеся дескрипторы (например, два источника в одном srcset, оба с дескриптором 2x) также недопустимы.

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

Если в элементе <img> атрибут srcset использует дескрипторы x, браузеры также рассматривают URL из атрибута src (если он указан) как возможный вариант и присваивают ему дескриптор по умолчанию 1x. Если же в атрибуте srcset используются дескрипторы ширины, src не учитывается, а вместо него используется атрибут sizes.

Пользовательский агент выбирает любой из доступных источников по своему усмотрению. Это даёт ему значительную свободу при выборе с учётом таких факторов, как предпочтения пользователя или условия пропускной способности. Пример см. в руководстве Адаптивные изображения.

width

Внутренняя ширина изображения в пикселях. Должна быть целым числом без единицы измерения.

usemap

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

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

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

align

Выравнивает изображение относительно окружающего содержимого. Вместо этого атрибута используйте свойства CSS float и/или vertical-align. Допустимые значения:

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 элемента.

Примечание: Этот атрибут считается устаревшим в спецификации HTML. Его будущее неопределённо; авторам следует использовать альтернативу на основе WAI-ARIA, например aria-describedby или aria-details.

name

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

vspace

Количество пикселей пустого пространства над и под изображением. Вместо этого используйте свойство CSS margin.

Стилизация с помощью CSS

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

<img> не имеет базовой линии, поэтому при использовании изображений во встроенном контексте форматирования с vertical-align: baseline нижняя граница изображения будет расположена на базовой линии текста.

Свойство object-position позволяет позиционировать изображение внутри блока элемента, а свойство object-fit — настраивать размер изображения внутри блока (например, определять, должно ли изображение вписываться в блок или заполнять его, даже если для этого потребуется обрезка).

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

Доступность

Создание содержательных альтернативных описаний

Значение атрибута alt должно быть ясной и краткой текстовой заменой содержимого изображения. Оно не должно описывать само наличие изображения или имя файла изображения. Если атрибут alt намеренно не указан, поскольку у изображения нет текстового эквивалента, рассмотрите альтернативные способы передачи смысла, который должно донести изображение.

Не делайте так

<img alt="image" src="penguin.jpg" />

Делайте так

<img alt="A Penguin on a beach." src="penguin.jpg" />

Важная проверка доступности — прочитать содержимое атрибута alt вместе с предшествующим текстом и убедиться, что оно передаёт тот же смысл, что и изображение. Например, если перед изображением стоит предложение «Во время путешествий я увидел милое маленькое животное:», пример из раздела «Не делайте так» программа чтения с экрана может озвучить как «Во время путешествий я увидел милое маленькое животное: изображение», что не имеет смысла. Пример из раздела «Делайте так» программа чтения с экрана может озвучить как «Во время путешествий я увидел милое маленькое животное: пингвин на пляже», что имеет смысл.

Для изображений, используемых для запуска действия, например изображений, вложенных в элемент <a> или <button>, рассмотрите возможность описать запускаемое действие в значении атрибута alt. Например, можно написать alt="next page" вместо alt="arrow right". Также можно добавить дополнительное описание в атрибут title; программы чтения с экрана могут озвучить его, если пользователь запросит это.

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

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

Обозначение SVG как изображения

Из-за ошибки VoiceOver VoiceOver неправильно объявляет SVG-изображения как изображения. Добавьте role="img" ко всем элементам <img> с исходными файлами SVG, чтобы вспомогательные технологии правильно объявляли SVG-содержимое как изображение.

<img src="mdn.svg" alt="MDN" role="img" />

Атрибут title

Атрибут title не является приемлемой заменой атрибуту alt. Кроме того, не следует дублировать значение атрибута alt в атрибуте title, указанном для того же изображения. В результате некоторые программы чтения с экрана могут дважды озвучить один и тот же текст, что может сбить пользователя с толку.

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

Значение атрибута title обычно отображается пользователю в виде всплывающей подсказки, которая появляется вскоре после того, как курсор перестаёт двигаться над изображением. Хотя это может предоставить пользователю дополнительную информацию, не следует рассчитывать, что пользователь обязательно её увидит: он может использовать только клавиатуру или сенсорный экран. Если информация особенно важна или ценна для пользователя, покажите её непосредственно одним из описанных выше способов, а не используйте title.

• Использование атрибута HTML title — обновлённая версия | Vispero

Примеры

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

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

<img src="/shared-assets/images/examples/favicon144.png" alt="MDN" />

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

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

<a href="https://developer.mozilla.org">
  <img
    src="/shared-assets/images/examples/favicon144.png"
    alt="Visit the MDN site" />
</a>

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

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

<img
  src="/shared-assets/images/examples/favicon72.png"
  alt="MDN"
  srcset="/shared-assets/images/examples/favicon144.png 2x" />

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

Атрибут src игнорируется в пользовательских агентах, поддерживающих srcset, если указаны дескрипторы w. Когда медиавыражение (width <= 600px) соответствует условию, загружается изображение шириной 200 пикселей (оно наиболее точно соответствует 200px); в противном случае загружается другое изображение.

<img
  src="clock-demo-200px.png"
  alt="The time is 12:45."
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(width <= 600px) 200px, 50vw" />

Вопросы безопасности и конфиденциальности

Хотя элементы <img> могут использоваться безобидным образом, они могут иметь нежелательные последствия для безопасности и конфиденциальности пользователей. Дополнительную информацию и способы устранения проблем см. в разделе Заголовок Referer: вопросы конфиденциальности и безопасности.

Техническая сводка

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

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

См. также

• элементы <picture>, <object> и <embed>
• object-fit, object-position, image-orientation, image-rendering и image-resolution: свойства CSS, связанные с изображениями.
• HTMLImageElement — интерфейс этого элемента
• Изображения в HTML
• Руководство по типам и форматам файлов изображений
• Адаптивные изображения