Прогрессивное изображение для сайта

Прогрессивное изображение (progressive image) — современная технология, которая является стандартом при оптимизации сайта с клиентской стороны (т.е. не требующая настройки серверного ПО).

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

 

Прогрессивное изображение или progressive image в Web

Суть progressive images и смысл применения в том, что рендеринг страницы в целом не приостанавливается для того, чтобы полностью прогрузить изображение. Изображения могут быть весьма объемными.

 

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

 

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

 

 

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

 

Команда для преобразования выглядит так.

jpegtran -progressive -outfile progressive-picture.jpg picture.jpg

Того же результата можно добиться с jpegoptim.

progressive image для Web следует использовать. Эта технология позволяет увеличить скорость загрузки, а значит и впечатление пользователя от посещения сайта.

 

Стоит отметить, что progressive формат имеет место только для JPEG, т.е. в основном для фотографий. Для схем и инфографики обычно применяется PNG и размер таких файлов редко существенен.

 

Прогрессивные изображения являются аналогом асинхронной загрузки javascript.