decoding

Атрибут decoding, допустимый для элементов <image>, подсказывает браузеру, следует ли выполнять декодирование изображения одновременно с отображением другого содержимого в рамках одного шага вывода, что выглядит более «правильно» (sync), или сначала отобразить и показать другое содержимое, а затем декодировать изображение и показать его позже (async). На практике async означает, что следующая отрисовка не ожидает декодирования изображения.

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

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

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

sync

Декодировать изображение синхронно с отображением другого содержимого и показать всё вместе.

async

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

auto

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

Пример

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image
    href="https://example.com/mdn_logo_dark.png"
    height="200"
    width="200"
    decoding="async" />
</svg>

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

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

См. также

• SVGImageElement: свойство decoding
• Что на самом деле делает атрибут image decoding? на tunetheweb.com (2023)