Настоящее и будущее прогрессивного рендеринга изображений

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

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

JPEG всё ещё лучший по метрикам размера картинки и времени на декодирование в браузере. WebP тоже хорош, но Safari грузит картинку только целиком.

AVIF не умеет в хороший прогрессивный рендеринг по дефолту, но в статье есть пример, как его научить. Даёт хорошие результаты по размеру файла, но декодирование уже идёт дольше в 2 раза.

Есть надежды на JPEG XL, но он пока не реализован в браузерах полноценно. Точнее, сейчас он включён только в Safari без прогрессивного рендеринга, а в других браузерах — спрятан за флагами.

Больше всего мне понравилась мысль из статьи, что пусть прогрессивный рендеринг как идея очень даже хорош, ведь позволяет пользователям не дожидаться полной загрузки картинки для понимания смысла картинки, но современный интернет ломает эту прогрессивность. Потому что современные сети в случае нестабильного соединения не загружают байтики равномерно и медленно, а грузят прерывисто и сразу большими чанками. Думаю, вы замечали иногда, что страница долго тупит, а потом резко загружается сразу вся. В этот момент скорее всего сеть появилась, а трафик пошёл большим потоком разом. И в таком случае прогрессивный рендеринг просто не успевает сработать, картинка приходит сразу вся.

Тем не менее это не повод бежать выключать прогрессивный рендеринг ради экономии 3 kB на картинку. Где-то оно всё же поможет.

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