#статья дня

Джейк Арчибальд решил проверить, как браузеры сегодня показывают картинки «по частям» — ту самую прогрессивную отрисовку, где сначала видишь мутное пятно, а потом — полную версию.

Когда-то это было базовой оптимизацией. При медленном интернете пользователю хотелось показать хоть что-то. Кто помнит, что картинки когда-то могли грузиться как сверху вниз, так и снизу вверх? :)

Формат JPEG буквально изобрёл прогрессивную загрузку и до сих пор работает — но Safari показывает картинку пикселями и заметно грубее, чем Chrome и Firefox, где изображение обновляется плавно.

Прогрессивный JPEG также немного дольше декодируется, но разница в миллисекунды.

JPEG XL должен был стать преемником — и вроде умеет прогрессивный рендеринг, но на практике:

— в Safari его нет вообще;
— в Chromium он пока экспериментальный;
— а декодится формат пугающе медленно.

Арчибальд отмечает, что в тестах JPEG XL показывал результат в 2–5 раз хуже AVIF, что делает его пока что малопригодным для реального веба.

Зато на горизонте появился прогрессивный AVIF.

В Chromium уже можно использовать слои. Этот режим разбивает изображение на два слоя — первый лёгкий, размытый и почти мгновенный, второй — финальный, с полным качеством. Правда, для этого надо пересобрать libavif и собрать изображение заново.

При этом информация с размытого слоя переиспользуется в качественном слое. Такой себе SQIP для богатых.

Safari и Firefox пока это не поддерживают, но сам подход перспективный: он даёт ту же визуальную плавность, что и старый прогрессивный JPEG, при гораздо лучшем сжатии.

Арчибальд подчеркивает: прогрессивность не решает проблему responsive изображений — браузеру всё равно нужно заранее знать, какой размер подгружать, иначе можно легко скачать лишние мегабайты.

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

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

Ну и будьте готовы — лиса с иллюстрации успеет вам надоесть.

https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/

#jpeg #img #avif #img