<img>: Элемент вставки изображения

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

alt

Определяет текст, который может заменить изображение на странице.

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

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

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

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

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

attributionsrc Экспериментальный

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

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

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

Примечание: Более подробную информацию см. в API отчетов об атрибуции.

Есть два варианта значения этого атрибута:

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

html

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

Это полезно в случаях, когда запрашиваемый ресурс находится не на сервере, которым вы управляете, или вы просто хотите обработать регистрацию источника атрибуции на другом сервере. В этом случае вы можете указать один или несколько URL-адресов в качестве значения атрибута attributionsrc. При запросе ресурса заголовок 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 отправляется без данных (то есть без куки, сертификатов X.509 или заголовка запроса Authorization).

use-credentials

Запрос CORS отправляется с включенными данными (то есть куки, сертификаты 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

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

fetchpriority

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

high

Указывает загрузку с высоким приоритетом по отношению к другим изображениям.

low

Указывает загрузку с низким приоритетом по отношению к другим изображениям.

auto

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

height

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

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

ismap

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

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

loading

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

eager

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

lazy

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

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

Примечание: Изображения с loading, установленным в lazy, никогда не будут загружены, если они не пересекают видимую часть элемента, даже если их загрузка изменила бы это, так как незагруженные изображения имеют width и height в 0. Добавление width и height к изображениям с отложенной загрузкой решает эту проблему и является лучшей практикой, рекомендованной спецификацией. Это также помогает предотвратить сдвиги макета.

referrerpolicy

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

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

sizes

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

1. Условие media condition. Его необходимо опустить для последнего элемента в списке.
2. Значение размера источника.

Условия media описывают свойства viewport, а не изображения. Например, (max-height: 500px) 1000px предлагает использовать источник шириной 1000 пикселей, если viewport не превышает 500 пикселей.

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

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

src

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

srcset

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

1. URL изображения
2. Необязательно, пробел, за которым следует одно из:
   • Описатель ширины (положительное целое число, непосредственно за которым следует w). Описатель ширины делится на размер источника, указанный в атрибуте sizes, для вычисления эффективной плотности пикселей.
   • Описатель плотности пикселей (положительное дробное число, непосредственно за которым следует x).

Если описатель не указан, источнику назначается описатель по умолчанию 1x.

Неправильно смешивать описатели ширины и плотности пикселей в одном атрибуте srcset. Также недействительны дублирующие описатели (например, два источника в одном атрибуте srcset, оба описаны с 2x).

Если атрибут srcset использует описатели ширины, атрибут sizes также должен быть присутствующим, иначе атрибут srcset будет проигнорирован.

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

width

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

usemap

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

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