Атрибут decoding тега <img>

Описание

Атрибут decoding указывает браузеру, как декодировать изображение, что может улучшить производительность загрузки страницы. Он помогает браузеру оптимизировать процесс рендеринга.

Пример использования:
<img src="large-image.jpg" alt="Большое высококачественное изображение" decoding="async" width="1200" height="800">

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

Значение Описание Когда использовать
sync Синхронное декодирование Для критически важных изображений выше сгиба
async Асинхронное декодирование Для изображений ниже сгиба или второстепенных
auto Браузер выбирает оптимальный режим (по умолчанию) Когда не уверены в приоритете изображения

Рекомендации по использованию:

<!-- Главное изображение (синхронное декодирование) --> <img src="hero.jpg" alt="Главный баннер" decoding="sync"> <!-- Галерея изображений (асинхронное декодирование) --> <img src="gallery1.jpg" alt="Фото 1" decoding="async"> <img src="gallery2.jpg" alt="Фото 2" decoding="async"> <!-- Изображение без определенного приоритета --> <img src="content-image.jpg" alt="Контентное изображение" decoding="auto">

Производительность и LCP (Largest Contentful Paint):

  • Для LCP-изображений используйте decoding="sync"
  • Асинхронное декодирование может уменьшить блокировку основного потока
  • Сочетайте с loading="eager" для критически важных изображений
  • Тестируйте влияние на метрики Core Web Vitals

Пример с lazy loading:

<img src="lazy-image.jpg" alt="Изображение с отложенной загрузкой" loading="lazy" decoding="async" width="600" height="400">

Ограничения и совместимость:

  • Поддерживается в Chrome, Firefox, Edge и Safari (с iOS 15+)
  • Не поддерживается в Internet Explorer
  • Влияние на производительность зависит от размера и количества изображений
  • Не заменяет оптимизацию изображений (сжатие, современные форматы)

Примечание: Атрибут decoding - это тонкая настройка производительности. Для максимального эффекта сочетайте его с другими методами оптимизации: правильными размерами изображений, современными форматами (WebP, AVIF) и адаптивной загрузкой.