Прогрессивное изображение (progressive image) — современная технология, которая является стандартом при оптимизации сайта с клиентской стороны (т.е. не требующая настройки серверного ПО).
Технология заключается в перекодировании изображений таким образом, что при первичном рендеринге страницы загружаются только общие очертания объектов на фотографии или схеме.
Суть progressive images и смысл применения в том, что рендеринг страницы в целом не приостанавливается для того, чтобы полностью прогрузить изображение. Изображения могут быть весьма объемными.
Загружаются общие очертания, DOM прогружается сверху вниз далее. Когда все элементы страницы, формирующие структуру загружены начинается прорисовка всех деталей изображений.
Фактически для картинок небольшого размера описанный процесс может проходить незаметно. При этом скорость загрузки страницы возрастает. Особенно это будет заметно пользователям, использующим медленное интернет соединение или мобильные устройства.
Сделать из обычного изображения прогрессивное можно при помощи утилиты jpegtran, ключ --progressive — один из самых распространенных из применяемых с ней.
Прогрессивное изображение с помощью jpegtran на примере
Пакет можно установить из репозитория
apt install libjpeg-progs
Команда для преобразования выглядит так.
jpegtran -progressive -outfile progressive-picture.jpg picture.jpg
В выводе file можно увидеть progressive, это означает что конвертация выполнена успешно.
Того же результата можно добиться с jpegoptim.
progressive image для Web следует использовать всегда, особенно это актуально для популярных ресурсов. Технология позволяет увеличить скорость загрузки, а значит и впечатление пользователя от посещения сайта.
Стоит отметить, что progressive формат имеет место только для JPEG, т.е. в основном для фотографий. Для схем и инфографики обычно применяется PNG и размер таких файлов редко существенен.
Прогрессивные изображения являются аналогом асинхронной или отложенной загрузки javascript скриптов.