Декодирование

Атрибут 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>