Атрибут decoding: подсказка о декодировании картинки
Decoding подсказывает браузеру, как согласовать декодирование изображения с отображением другого содержимого. Он относится к подготовке изображения к показу и не задаёт очередь сетевых запросов напрямую.
Назначение
Decoding подсказывает браузеру, как согласовать декодирование изображения с отображением другого содержимого. Он относится к подготовке изображения к показу и не задаёт очередь сетевых запросов напрямую.
Как это работает
Async позволяет не задерживать другую отрисовку ради декодирования, sync просит согласовать показ, auto оставляет выбор браузеру. Это подсказки, а не обещание точного времени. Создайте локальное изображение для выполнения примера.
Пример
<!-- Файл создаётся отдельно в учебном проекте. -->
<img src="diagram.png" alt="Схема связи документа и таблицы стилей" width="960" height="540" decoding="async">Что должно получиться
Браузер получает подсказку async при сохранении обычных размеров и альтернативного текста. На небольшой картинке видимая разница может отсутствовать: это не означает, что атрибут записан неправильно.
Граница применения и частая ошибка
Не путайте decoding с loading и fetchpriority. Атрибут не сжимает файл, не исправляет битый ресурс и не гарантирует ускорение страницы. Для программного ожидания готовности изображения существует отдельный метод decode(), который требует обработки ошибок.
Самостоятельная проверка
Сравните запись с async и без атрибута на своём наборе изображений. Измеряйте повторные прогоны в одинаковых условиях. Проверьте, что размеры, вес файла и выбор формата оптимизированы независимо от подсказки.