Прогрессивный формат jpeg что это

Что такое прогрессивный JPEG и как его создать

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

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

Вторая — тот же процесс загрузки JPEG прогрессивного.

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

Как создать прогрессивный JPEG

Превратить JPEG в PJPEG можно с помощью графических редакторов, поддерживающих эту функцию, например, ImageMagick или Irfanview.

Рассмотрим эту процедуру на примере работы во втором приложении.

В открывшемся окошке дополнительных параметров отметьте чекбокс «Save as progressive JPG» и сохраните файл обычным способом.

Что с PJPEG не так

Источник

Что такое Progressive jpeg и зачем он нужен сайту

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

Но можно значительно уменьшить их вес, если предварительно сжать изображения. Чем сильнее сжата картинка, тем быстрее она будет загружаться и тем быстрее будет загружаться сайт в целом. Но важно соблюдать баланс, ведь чем больше сжатие, тем хуже становится качество изображений, на практике сжатие без видимых ухудшений в качестве изображений достигается при качестве 80 из 100. В статье, говоря о Progressive jpeg, мы подразумеваем его использование совокупно со сжатием с качеством 80.

Что такое Progressive jpeg

Самый популярный в Интернете формат изображений — JPEG. Для сжатия картинок в этом формате есть несколько режимов сжатия. Один из них — Прогрессивный (Progressive jpeg или просто PJPEG).

При использовании режима Progressive JPEG сжатые данные записываются в выходной поток в виде набора сканов. Каждый последующий скан описывает изображение с большей степенью детализации.

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

Чем отличается Прогрессивный режим сжатия изображений от базового

Базовый последовательный (baseline) режим сжатия картинок в формате jpeg кодирует и декодирует изображение сверху вниз. Если у пользователя медленное соединение, то сначала он увидит верхнюю часть картинки, потом еще часть ниже и так далее, пока не загрузится вся картинка целиком.

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

Преимущества Progressive jpeg

В отличие от базового режима сжатия изображений, у прогрессивного есть ряд преимуществ:

Недостатки Progressive jpeg

У режима сжатия Progressive jpeg есть и свои недостатки. Хотя их не много, но все же следует учитывать при подготовке изображений для сайта.

Как сжимать изображения в Progressive jpeg

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

Например, в программе Photoshop следует выбрать команду Файл – Сохранить для веб, и перед сохранением указать формат Progressive JPEG. Также в сети есть множество сервисов, которые позволяют привести изображения к формату Progressive jpeg.

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

Источник

Прогрессивный JPEG: новый best practice

С точки зрения пропускной способности канала, изображения — обжоры. В среднем, они занимают наибольший (62%) средний трафик сайтов и чаще всего их передача является узким местом. Загружаясь, изображения рвут страницу, расталкивая другие элементы вокруг и вызывая неуклюжую перерисовку (прим. перев.: от этого, конечно, можно избавиться определенной версткой, но тогда нужно хардкодить или ограничивать размеры картинок). Загрузка изображения на странице воспринимается или как «тик, тик, тик, тик, тик, готово», или же сначала вообще ничего нет, а потом внезапно «бум!» и оно появляется ниоткуда. Все понимают, что подразумевается под «тик, тик, готово» и «бум» и всех нас это немного раздражает, потому что мы чувствуем, сколько времени наших прелестных и коротких жизней потеряно в ожидании загрузки картинок.

Упущенная возможность

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

Оптимизированные для веба фото — это jpeg, а jpeg делится на два типа: базовый последовательный (baseline) и прогрессивный (progressive). Последовательный jpeg — это один скан изображения сверху вниз в полном разрешении, а прогрессивный jpeg — это серия сканов улучшающегося качества. Так они и рендерятся — последовательный jpeg отрисовывается сверху вниз («тик, тик, тик, …»), а прогрессивный быстро размечает свою территорию и затем совершенствуется (по крайней мере так задумано).

Прогрессивный jpeg лучше, потому что он быстрее. Появляться быстрее — значит быть быстрее, а воспринимаемая скорость важнее фактической скорости. Даже если мы экономим на предоставляемом контенте, прогрессивный jpeg дает как можно больше, как можно скорее. Он помогает нам в сложной задаче предоставления больших и красивых фотографий.

В локальном эксперименте — иллюстрация в начале поста — на задушенном канале, 80-килобайтный прогрессивный jpeg появляется на странице раньше, чем 5-килобайтный последовательный jpeg (то же самое изображение, уменьшенное в размере) в Firefox под Windows, что должно произвести впечатление. Конечно, на первом проходе прогрессивный jpeg имеет низкое разрешение, но он содержит столько же информации, сколько и маленькое изображение, или даже больше. А если масштаб страницы уменьшен, например, на мобильном устройстве, то низкое разрешение даже не заметно. Адаптивные изображения работают на нас прямо сейчас (прим. перев.: отсылка к responsive web design)!

По существу, прогрессивный jpeg лучше. Так какой же самый распространенный тип jpeg в сети? Угадали: последовательный, и с очень большим отрывом. В выборке из тысячи изображений, 92.6% — последовательные.

Не беспокойтесь, нам всего лишь нужно объявить, что прогрессивный jpeg — это best practice и затащить остальной мир к нам на борт. Но чтобы сделать такое объявление, нужно быть в нем уверенным. А для этого сначала необходимо понять, как сегодня обстоят дела с поддержкой прогрессивного jpeg браузерами.

Проверка реальностью №1

Прогрессивные jpeg отрисовываются во всех браузерах, об этом не стоит переживать. Нас волнует то, как они отрисовываются.

Поведение прогрессивных jpeg в браузерах

Результаты разочаровывающие, но в целом, доля рынка браузеров с прогрессивной отрисовкой прогрессивных jpeg идет вверх. Поддержка пока что составляет около 65% (Chrome + Firefox + IE9).

К сожалению, браузеры, которые не рендерят прогрессивные jpeg прогрессивно, отрисовывают их сразу целиком после того, как загрузка изображения завершена, что, по сути, делает их менее прогрессивными. Они становятся медленнее, чем последовательные jpeg. Несмотря на то, что последовательная отрисовка не такая быстрая и плавная, как прогрессивная, она по крайней мере дает хоть что-то, пока мы ждем, и «тик, тик» является своего рода индикатором загрузки (хорошей вещью). Нельзя недооценивать уверенность, которую чувствуют пользователи видя, что что-то происходит.

Выбирая прогрессивный jpeg мы обеспечиваем большинству пользователей отличные впечатления и меньшинству — весьма значимому меньшинству — худшие впечатления. Но выбирать последовательный jpeg потому, что он больше подходит в меньшинстве просмотров — ужасный компромисс. Нужно предлагать пользователям лучшее и смотреть в будущее.

Проверка реальностью №2

Вы можете спросить «А не будут ли прогрессивные jpeg весить больше, чем обычные? Не платим ли мы за “слои”?». С некотороыми другими типами многослойных изображений — платим, но не с jpeg. Прогрессивный jpeg обычно на несколько килобайт меньше, чем его же последовательная версия. Стоян Стефанов в процессе построения графика конвертации 10000 случайных последовательных jpeg в прогрессивные, открыл ценное практическое правило: файлы больше 10Кб, чаще всего, будут весить меньше в прогрессивном варианте.

Убеждать стало бы проще, если бы можно было сказать, что прогрессивные jpeg всегда весят меньше, так что их и нужно всегда использовать. Стоян нам в этом помогает. Он говорит: «Еще одно наблюдение по поводу правила 10Кб: в тех случаях, когда вес последовательного jpeg меньше, он меньше с небольшой разницей. А когда меньше прогрессивный, то он обычно меньше намного. Так что говорить, что нужно всегда использовать прогрессивный и станет лучше — это нормально».

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

Причиной того, что последовательные jpeg наиболее распространены в сети, является, без сомнения, то, что инструменты оптимизации изображений создают их по умолчанию. Однако, все просмотренные мною — Photoshop, Fireworks, ImageMagick, jpegtran — имеют возможность сохранения и в прогрессивном варианте. Таким образом, чтобы отдавать прогрессивные jpeg, нужно сознательно модифицировать свой процесс оптимизации изображений.

Например, Smushit может переводить последовательные jpeg в прогрессивные. Smushit, кстати, можно запускать из командной строки и интегрировать в процесс оптимизации изображений.

Проверка реальностью №3

Согласно этому FAQ по сжатию jpeg, каждый прогрессивный проход отрисовки нагружает ЦПУ примерно на столько же, на сколько отрисовка целого последовательного jpeg. Это неважно для настольных ПК, но возможно имеет значение для мобильных устройств.

Лишние вычисления — недостаток, но не камень преткновения. Предоставление фотографий на слабом аппаратном обеспечении — сложная задача вне зависимости от этого. Я в курсе дела, потому что пишу приложение-фотогалерею с бесконечным скроллингом и оно падает на iPad’e. При обработке большого количества изображений на мобильных платформах сложные задачи возникнут в любом случае.

Как видно в таблице, мобильный Safari не отрисовывает прогрессивные jpeg прогрессивно и вероятно потому, что они нагружают ЦПУ. Прогрессивый jpeg не является новым форматом изображений. Следовательно, осознанно и без причин не поддерживать прогрессивный jpeg — не вариант для браузеров, даже для мобильных. Будем надеяться, что скоро мобильные браузеры станут справляться с прогрессивным рендерингом, но причины текущего отсутствия поддержки имеют смысл. Очень обидно, потому что как раз на мобильных устройствах прирост скорости и экономия в размерах файлов, которые предоставляет прогрессивный jpeg, пришлись бы очень кстати. Выше было упомянуто, что он как бы является решением для адаптивных изображений на данный момент. На самом деле он мог бы быть таковым, но время еще не пришло.

Глядя в будущее

Месяц назад, Google запрыгнул на борт со своим сервисом Mod_Pagespeed, сделав convert_jpeg_to_progressive основным фильтром. SPDY тоже не отстает, переводя jpeg более 10Кб в прогрессивные по умолчанию, согласно практическому правилу Стояна. Браузеры, поддерживающие инкрементальное отображение, от этого станут казаться намного быстрее. Как видно из таблицы выше, включающей Google Chrome, такие действия Google имеют смысл. Я не стану говорить, что если уж «не-причиняй-зла-делай-веб-быстрее» Гугл выбрал progressive jpeg как best practice, то и мы должны тем более. Но это лишнее подтверждение. И самое главное, это показывает, что прогрессивный jpeg — формат, который был в своего рода морозилке на протяжении десятилетия — начинает свое возвращение.

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

Источник

Progressive JPEG – что за зверь?

Что такое progressive JPEG?

Progressive JPEG – это JPEG-изображение в прогрессивном формате. Прогрессивный формат изображения позволяет браузеру загружать не количественно, а качественно. Другими словами – загружать изображение постепенно, постоянно отображая это изображение с различным качеством от 0 до 100 процентов.

Просто сравните

Рис1. Загрузка изображения в обычном (последовательном) формате

Рис 2. Загрузка изображения в прогрессивном формате

На мой взгляд, progressive JPEG – это чертовски здорово! Знаете, progressive JPEG появился уже очень давно (порядка 10 лет назад), однако сайтов, использующих эту технологию довольно мало, особенно в нашей стране.

И я не знаю почему. На Хабре есть статья на эту тему. Она там лежит аж с 2013 года. Да, на тот момент не так хорошо браузеры поддерживали эту технологию. Но время не стоит на месте. И поэтому уже давно пора переходить на progressive JPEG.

Как сделать progressive JPEG своими руками

Сохранить изображение в прогрессивном формате проще простого. Способов несколько:

А нужно ли оно мне вообще?

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

Разница между последовательным и прогрессивным JPEG может быть незаметна на компьютерах. На компьютерах с очень хорошим интернетом (больше 100 Мбит/с) браузер загружает изображение настолько быстро, что изображение прогружается моментально в полном объёме. Тоже самое может происходить с маленькими изображениями. Если же соединение слабое (обычно это мобильные сети, к примеру 3G), или изображение имеет большой размер, то разница между последовательным и прогрессивным форматом будет “налицо”.

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

Источник

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

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

Progressive JPEG это…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник