HTML. Decoding img

🧱 Суть

Атрибут decoding у тега <img> управляет тем, как браузер декодирует изображение перед отображением.

Декодирование – это процесс преобразования данных изображения из файла (jpg, png, webp) в готовое изображение для вывода на экран.

Пример:

<img src="image.jpg" decoding="async" alt="Image">

📦 Проблема

1. Большие изображения могут задерживать отрисовку

Перед показом картинки браузеру нужно:

• загрузить файл
• декодировать изображение
• подготовить его к отображению
  Если делать это синхронно – это может занимать основной поток.

2. Не всегда понятно, как браузер обрабатывает изображения

Без явного указания браузер сам выбирает стратегию:

<img src="image.jpg">

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

✅ Решение

Использовать атрибут:

decoding="async"

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

💻 Код

Асинхронное декодирование:

<img 
  src="image.jpg" 
  decoding="async" 
  alt="Description"
/>

Значения decoding

Значение	Описание
sync	декодировать сразу, может блокировать отрисовку
async	декодировать отдельно, не блокируя рендер
auto	браузер выбирает сам (значение по умолчанию)

Когда использовать

Подходит для:

• карточек товаров
• галерей
• списков изображений
• второстепенных картинок

Не всегда подходит для:

• логотипа в шапке
• главного изображения первого экрана
• элементов, важных для первого впечатления

🎯 Вывод

• decoding управляет способом подготовки изображения к отображению
• async помогает не блокировать основной поток
• для большинства второстепенных изображений подходит decoding="async"
• критичные изображения лучше оставить под контролем браузера (auto) или декодировать синхронно

🔗 Связано

• Tips. CSS
• HTML. InnerHTML
• HTML. Адаптивность изображений