Что такое Progressive JPEG и для чего нужен этот формат

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

Progressive JPEG это…

Progressive JPEG (прогрессивный JPEG) — это формат со специфичным типом декодирования. «Прогрессивный» в этом случае не является синонимом к слову «современный». Речь идет о прогрессии в ее базовом понимании.

В отличие от «обычных» JPEG-файлов, их прогрессивные собратья появляются на страницах сайта моментально, но в плохом качестве. Их качество нарастает постепенно, по мере загрузки сайта, и в итоге доходит до максимума, когда страница полностью прогрузится. Тогда картинка дойдет до оригинального разрешения с полным цветовым диапазоном.

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

Такой подход к декодированию изображений существует порядка 10 лет, но, несмотря на его очевидную пользу, используется редко. На ранних этапах развития причиной низкой распространенности Progressive JPEG служило отсутствие поддержки среди браузеров. Сейчас же распространению мешают привычки и низкая осведомленность вебмастеров.

Отличия стандартного JPEG от Progressive-версии

Фундаментальная разница кроется в методах подачи информации по ходу загрузки страницы.

• JPEG-изображение появляется на экране постепенно. Сначала небольшой кусочек картинки сверху, потом еще больше. Каждый кусок отображается в максимальном разрешении. 

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

Преимущества и недостатки Progressive JPEG

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

Стандартные JPEG в этом случае будут появляться на экране слишком медленно, и из-за этого в верстке могут образовываться «пустые» участки.

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

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

Также Progressive JPEG зачастую занимает меньше пространства на жестком диске (хотя это не касается маленьких изображений – фавиконок или миниатюр, к примеру). 

На загрузку прогрессивного формата уходит больше ресурсов компьютера. Алгоритм декодирования изображений по несколько раз проходится по одному и тому же файлу, а из-за этого возрастает нагрузка на процессор и ОЗУ. 

Принцип работы Progressive JPEG

Это для тех, кому интересен именно технический аспект.

При декодировании используется алгоритм Discrete Cosine Transform. Он конвертирует каждый блок пикселей 8 на 8 единиц в 64 коэффициента. Первый из них содержит общую информацию об изображении, то есть данные обо всех пикселях, формирующих картинку. Это DC-коэффициент. Еще есть 63 AC-коэффициента, содержащих подробные данные – вертикальные и горизонтальные детали на низких частотах (градиенты) и высоких частотах (более четкие детали).

Далее разберем непосредственное взаимодействие с прогрессивными JPEG-изображениями.

Алгоритм конвертации изображений на сайте

Протестируем ваш ресурс с помощью сервиса WebPageTest, чтобы выяснить, какие изображения поддерживают прогрессивный формат. Затем конвертируем те картинки, которые не попали в список прогрессивных. Скопом выгружаем их на свой сайт, а затем снова проводим тестирование. Для этого:

1. Заходим на WebPageTest и указываем адрес страницы, которую надо проверить.
2. Кликаем по кнопке START TEST.
3. Смотрим результаты тестирования. Напротив стандартных JPEG появится запись FAILED.
4. Открываем конвертер RIOT или любой аналог (Optimizilla, ShortPixel).
5. Загружаем в него неоптимизированные изображения.
6. Результат работы конвертера переименовываем так, чтобы названия новых файлов совпадали с теми, что загружены на сайт.
7. Выгружаем продукт конвертации в файловое хранилище своего сайта.
8. Снова открываем WebPageTest и повторно проверяем сайт на наличие стандартных JPEG. Теперь их быть не должно.

Другие способы конвертировать JPEG в Progressive JPEG

Первый способ — сохранение через Photoshop. Надо открыть картинку в приложении, затем выбрать меню «Файл». Потом выбрать пункт «Сохранить для веб». В ходе сохранения надо поставить галочку напротив строки «Прогрессивный формат».

Второй — использование конвертеров из стандартного JPEG в прогрессивный. Есть парочка онлайн-сервисов для выполнения этой задачи: JPEG.io и IMGOnline. А еще есть RIOT — офлайн-оптимизатор для Windows с той же функциональностью.

Третий — автоматизация процесса конвертации форматов с помощью плагинов для вашей CMS. Если сайт работает на базе WordPress, то проще всего установить Kraken.io Image Optimizer или его аналог ShotrPixel Optimizer.

Четвертый — можно установить пакет JPEGTran в Linux или macOS. После его установки нужно выполнить команду: 

jpegtran -copy none -progressive путь до изображения, которое нужно конвертировать путь до папки, куда надо экспортировать конвертированный файл

Пятый — использовать ImageMagick, который по умолчанию встроен во все Linux-дистрибутивы. Для его работы надо просто запустить команду:

mogrify -interlace plane путь до директории, изображения в которой надо экспортировать

Используем на сайте стандартный и прогрессивный формат

Выбирать между двумя типами декодирования не всегда обязательно. Скрипт сканирования картинок можно модифицировать, объединив два подхода. Модифицированная версия скрипта будет использовать обе технологии попеременно, достигая наиболее высоких результатов с точки зрения экономии пространства, времени и ресурсов. Вы не получите сразу всех преимуществ Progressive JPEG. Это будет некий баланс между двумя «мирами»: стандартным и прогрессивным.

Из недостатков объединения двух методов можно выделить некорректно отображающиеся первые итерации изображения и небольшую задержку загрузки в сравнении со стандартными JPEG-файлами. Чтобы реализовать именно такой подход, следует воспользоваться декодером MozJPEG при конвертации изображений на компьютере. Но перед этим нужно:

• Создать файл scanscript.txt, сохранив туда следующий текст:

0 1 2: 0 0 0 0; 
0: 1 9 0 0; 
2: 1 63 0 0 ; 
1: 1 63 0 0 ; 
0: 10 63 0 0;

• Потом ввести в терминал команду:

cjpeg -scans scanscript.txt путь до файла, который надо конвертировать путь до директории, куда надо импортировать конвертированный файл

Также для этого можно воспользоваться сервисами компании Cloudinary, помогающими оптимизировать медиаконтент в сети.

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