HTMLImageElement: свойство decoding

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

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

"sync"

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

"async"

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

"auto"

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

• Chromium по умолчанию "sync".
• Firefox по умолчанию "async".
• Safari по умолчанию "sync" за исключением небольшого числа случаев.

Свойство decoding предоставляет браузеру подсказку о том, должен ли он выполнять декодирование изображения вместе с другими задачами в одном шаге ("sync"), или позволить отобразить другое содержимое перед завершением этого процесса ("async"). На практике различия между этими двумя значениями часто трудно заметить, и там, где есть различия, часто есть лучший способ.

Для изображений, вставленных в DOM внутри области просмотра, "async" может привести к вспышкам нестилизованного содержимого, в то время как "sync" может привести к небольшому количеству задержек. Использование метода HTMLImageElement.decode() обычно является лучшим способом достижения атомарного отображения без задержки другого содержимого.

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

В приведенном ниже примере на странице, скорее всего, отобразится пустое изображение, пока изображение загружается. Установка decoding не предотвратит это.

const img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
document.body.appendChild(img);

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

async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

const img = new Image();
await loadImage("img/logo.png", img);
// Using `sync` can ensure other content is only updated with the image
img.decoding = "sync";
document.body.appendChild(img);
const p = document.createElement("p");
p.textContent = "Image is fully loaded!";
document.body.appendChild(p);

Однако лучшим решением является использование метода HTMLImageElement.decode() для решения этой проблемы. Он предоставляет способ асинхронного декодирования изображения, откладывая вставку в DOM до полной загрузки и декодирования, тем самым избегая проблемы с пустым изображением, упомянутой выше. Это особенно полезно, если вы динамически меняете существующее изображение на новое, а также предотвращает задержку ненужных отрисовок вне этого кода, в то время как изображение декодируется.

Использование img.decoding = "async" может помочь избежать задержки отображения другого содержимого при длительном декодировании:

const img = new Image();
img.decoding = "async";
img.src = "img/logo.png";
document.body.appendChild(img);

• Метод HTMLImageElement.decode()
• Элемент <img> атрибут decoding
• Что на самом деле делает атрибут декодирования изображения? на tunetheweb.com (2023)