Прогрессивный jpeg против базовой линии jpegs. Оптимизация изображений. Уровни сжатия JPG

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

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

Этот приём улучшает восприятие веб-страниц пользователями?

Быстрый рендеринг всегда лучше медленного. Главное — вывести на экран хоть что-то, пусть это и не готовый контент.

Но уверены ли мы в этом? Изучив комментарии на Reddit , я нашёл много интересных (в том числе и негативных) комментариев. Вот два из них:

«Кто и когда решил, что если показывать сначала картинку низкого качества, загрузка будет казаться более быстрой? По мне, так все эти эффекты только отвлекают и выглядят ужасно. Загрузка уж точно не кажется более быстрой. Я все равно не могу понять, что на изображении, пока оно не загрузилось, есть там размытая заглушка или нет».
- dwb , Hacker News

Исследования о восприятии пользователями

Я решил найти научные исследования, которые могли бы подтвердить или опровергнуть позитивное восприятие таких приёмов. Но я не смог найти ни одного, которое бы подтверждало, что размытые изображения повышают «субъективную» скорость загрузки. В этот момент я вспомнил о прогрессивном JPEG .

Назад к основам: прогрессивный JPEG

Уже давно существует встроенная в изображения «технология прогрессивной загрузки». Хороший пример - прогрессивный JPEG .

Прогрессивный JPEG часто называют одним из лучших форматов изображений. Особенно для сайтов, на которые заходит большое количество пользователей с медленным подключением. Энн Робсон написала пост в поддержку прогрессивного JPEG ещё пять лет назад, подытожив его преимущества:

«Изображения в прогрессивном JPEG лучше, потому что они быстрее. Субъективная скорость важнее, чем настоящая скорость . Даже если мы загрузим на сайт слишком много изображений, то с помощью прогрессивного JPEG можно отобразить намного больше информации».

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

Базовое кодирование JPEG — изображения

Прогрессивное кодирование JPEG — изображения

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

С точки зрения пользователя, методы прогрессивной загрузки, такие как Blur-up и SQIP , похожи на прогрессивный JPEG : сначала браузер показывает изображение с низкой детализацией, а после загрузки заменяет его оригинальным.

Что интересно, большинство JPEG-файлов используют базовый режим. Прогрессивные JPEG-изображения составляют максимум 7% от всех файлов JPEG . Если прогрессивная кодировка субъективно ускоряет загрузку, почему прогрессивный JPEG не получил большего распространения?

Исследование

Мне удалось найти только одно исследование по теме, озаглавленное «Прогрессивный рендеринг изображений: добро или зло?»

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

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

Недавно я упомянул об этом исследовании в дискуссии, посвящённой LQIP («изображениям-заглушкам низкой детализации», от английского Low-Quality Image Placeholders ). Сразу в нескольких ответах прозвучали сомнения в научной строгости исследования :

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

Ограниченное и спорное исследование. Чтобы делать какие-либо выводы, нужны большие объёмы данных.

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

Измеряем субъективную скорость загрузки

Представим две следующих раскадровки, записанных с некого сайта:

Схема загрузки одного и того же сайта.

Пользователь субъективно воспринимает версию B как загружающуюся быстрее, чем версия A . Это происходит из-за того, что отдельные части страницы в версии B загружаются быстрее, чем в версии А.

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

Чтобы оценить, как быстро загружается страница, сегодня используются такие показатели, как индекс скорости (Speed Index ). Он измеряет процент того, насколько визуально закончена загрузка страницы. Чем ниже результат, тем лучше:

Формула индекса скорости

Изначально Speed Index измерял прогресс, сравнивая изменения в гистограммах каждого из основных цветов (красного, зелёного и синего ). Этот метод называется «средняя разница гистограмм ». Он помогает избежать ошибок, когда все элементы страницы могут одновременно сдвигаться на несколько пикселей в процессе загрузки. Подробно ознакомиться с работой алгоритма Speed Index можно в разделе документации, посвящённом измерению визуального прогресса .

Я решил испытать, как работает с заглушками низкой детализации тест WebPagetest :

Раскадровка, демонстрирующая степень визуальной завершённости в процентах.

Мы видим, что изображение загружается между 8 и 10 секундами. Размытая заглушка увеличивает процент завершённости с 75 до 83. Загрузка окончательной версии изображения доводит эту цифру до 93%.

Получается, что, согласно алгоритму Speed Index , заглушка вносит свой вклад в визуальную завершённость страницы. Видно и то, что заглушка не воспринимается как завершённая зона.

Speed Index - не единственный способ измерения скорости рендеринга страницы. В инструментах разработчика Chrome есть возможность запустить проверку производительности. Зайдите в меню Audits → Perform an audit → Run audit .

После выполнения проверка выдаёт вот такой отчёт:

Обратите внимание на размытую заглушку, которая затем превращается в финальное изображение.

Один из показателей проверки называется “Perceptual Speed Index ” («Субъективный индекс скорости ») и показывает значение 4,245. Что он означает? Возможно, это то же самое, что и Speed Index из теста WebPagetest ?

Подход Speed Index с измерением схожести пикселей (та самая «средняя разница гистограмм ») имеет свои недостатки. К примеру, он не учитывает визуальную схожесть фигур, цветов и объектов.

Четыре разных фигуры с одинаковым количеством чёрных и белых пикселей.

В большинстве случаев это не сильно повлияет на оценку визуальной завершённости - на практике Speed Index и Perceptual Speed Index в значительной степени совпадают.

«В ходе масштабных исследований (с использованием собранных WebPagetest видеозаписей более чем 500 страниц из мобильного рейтинга Alexa ) мы увидели, что SI и PSI демонстрируют линейную корреляцию с коэффициентом 0,91», - Измерение скорости загрузки видимой части страницы при помощи P erceptual Speed Index (PSI )

Perceptual Speed Index («Субъективный индекс скорости»)

В документации к инструментам Google Lighthouse сказано, что PSI измеряется при помощи модуля Speedline . Он рассчитывает субъективный индекс скорости исходя из тех же принципов, что и обычный индекс скорости. Но при этом учитывает видимый прогресс загрузки, используя SSIM , а не разницу гистограмм.

SSIM («структурное сходство », от английского Structural Similarity ) используется для измерения сходства двух изображений. Этот метод моделирует восприятие изображений человеческим глазом и учитывает, насколько похожи фигуры, цвета и объекты. Но на этом применение SSIM не ограничивается. Интересно использование структурного сходства при оптимизации сжатия изображений. Например, кодировка cjpeg-dssim использует максимальную степень сжатия jpeg и создаёт изображение с SSIM , близким к оригинальному.

В примере, приведенном ниже, показаны SVG-изображения , созданные в Primitive и проверенные в Image SSIM JS . Чем больше фигур мы используем, тем ближе оценка к изначальному изображению, где SSIM = 1 .

Стандарт JPEG определяет различные режимы сжатия. Только три из них широко используются:

• Baseline Sequential
• Расширенная Последовательная
• Progressive

Единственное различие в первой находится в ряде таблиц допускается. В противном случае они кодируются и декодируются точно так же.

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

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

JPEG принимает 8x8 блоков данных пикселей и применяет дискретное косинусное преобразование к этим данным. 64-пиксельные данные становятся 64 DCT-коэффициентами. Первый коэффициент DCT называется коэффициентом «DC», а другой 63 называется «AC».

Это путаная терминология, основанная на аналогии с постоянным током и переменным током. Коэффициент DC аналогичен среднему значению пикселя блока.

В последовательном JPEG, 64 коэффициента в блоке кодируются вместе (с коэффициентами DC и AC, закодированными по-разному). В Progressive JPEG DC и AC коэффициенты сканируют кодированные битовые поля (настраиваемого размера) в пределах коэффициента. Теоретически у вас может быть отдельное сканирование для каждого бита каждого компонента.

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

Прогрессивное кодирование может быть медленнее, чем последовательное, поскольку вам необходимо сделать несколько проходов над данными.

Вопрос о скорости в прогрессивном декодировании зависит от того, как это делается. Если вы полностью декодируете все изображение, прогрессивный, возможно, будет медленнее, чем последовательный. Если ваш декодер показывает затухание изображения, поскольку он обрабатывает поток, он будет намного медленнее, чем последовательный. Каждый раз, когда вы обновляете дисплей, вам необходимо выполнить обратное преобразование DCT, upsampling и color.

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

Там нет никакой разницы в качестве между прогрессивной и последовательной

OptiPic allows your website to demonstrate better technologies and display jpeg faster thanks to progressive jpeg technology.

The technology of progressive jpeg allows you to keep the original quality of the picture, but the speed of loading such a file is greatly higher than of loading photos with other technical data. Let us consider this issue in more detail and more closely, and also talk about those aspects that require closer attention.

Progressive JPEG means faster loading of JPEG

Web optimized photos are in JPEG format. It has a certain classification and is represented by two following categories:

• Sequential (baseline) – provides a regular boot image in one layer. Images are loaded from top to bottom with full resolution;
• Progressive – includes a series of successive layers with gradually improving quality.

Progressive jpg first simply marks the contours of the future photo, and then loads the image into layers - from the layer with the worst quality to the last final layer with the maximum quality.

The advantages of this format are obvious and undeniable. Such a photo appears on the screen much faster, and its volume can be quite impressive. And this speed has a positive impact on the overall download speed of the web page as a whole.

It is enough to recall one simple fact for a better understanding. Even if you use low speed connection, a file in progressive jpg format with a size of 80 KB will be displayed much faster than a similar image of a sequential jpeg, which is reduced in size and has only 5 KB. Isn’t it impressive? Oh, yes it is!

During the first pass, the progressive jpeg has a lower resolution. However, the file includes the amount of data that are similar to a smaller image. And when displaying an object on a mobile device, the vast majority of users will not even notice the low resolution.

Despite all the advantages of progressive jpeg , its popularity today is significantly less than of the one. Over 90% of all images in the Web have a consistent display format.

But the situation is gradually changing in the opposite direction. The first steps in this direction are made by Google, which introduces new services for working with progressive jpeg and its subsequent promotion. Moreover browsers by the most different manufacturers gradually give preference to this format of display of photographs. Technology, which has been in a kind of isolation for the past few years, is now becoming more and more popular and in demand.

Now progressive jpeg has a wide range of advantages and benefits that are unquestioned. This format will confidently take its own place in future and in all its aspects is much better than outdated analogues of previous years.

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

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

Мы не сильно погрешим против истины, если скажем, что фотограф – это человек с фотоаппаратом, талантом и знаниями, плюс своя аудитория.

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

Буквально все, у кого есть современные устройства, активно эксплуатируют всемирную паутину для донесения застывших моментов реальности широкой публике.

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

Но при размещении фотографий высокого качества в интернете, могут появиться определённые трудности.

Общая картина с приличными по скорости интернет-каналами заставляет желать лучшего. А уж высокоскоростная передача данных стационарного (оптика, ADSL и т.д.) и мобильного (UMTS, WiMax, LTE) типов доступна далеко не везде.

Вот ведь ирония: сейчас компания Yota разворачивает в ряде регионов сети 4G, на основе LTE Advanced. В то время, как предшественник - 3G, представлен скорее фрагментарно, ограничиваясь мегаполисами и связывающими их крупными транспортными артериями.

Внушительный процент всех существующих интернет-каналов (радио и проводных) представлен низкоскоростными каналами.

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

Вывод на экран полноразмерного снимка при медленном интернете может достигать минут. Можно ли что-нибудь сделать? Пожалуй, что да.

Progressive JPEG - эффективное использование PJPEG

Речь здесь пойдёт не о каналах и провайдерах и не о тех случаях, когда постятся фотки с мобильника в Контакт. Но если загружаем снимки на 16 Мп в Panoramio, то достаточно пары кликов, чтобы существенно улучшить и скорость загрузки фото, и комфорт для зрителей.

Всё это при том же самом размере файлов и кадров.

Как правило, основная масса фото отправляется на сервер в формате JPEG после предварительной обработки - цвето и яркостная коррекция, обрезка и прочее.

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

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

И так – до победного конца. Но часто пользователь понятия не имеет о том, что находится на загружаемом фото и нужно ли оно ему.

Однако, приходится ждать, пока достаточный для понимания сути снимка объём загрузится.

Избежать такого неудобства для пользователя несложно: технология JPEG имеет ещё один метод построения снимка – прогрессивный метод или Progressive JPEG .

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

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

При этом грузится сразу весь снимок, но сниженного качества, т.к. передаётся лишь часть информации. Можно не дожидаясь вывода всех групп принять решение – нужен нам этот снимок или нет.

Так, последовательно друг за другом грузятся все группы (в стандарте они называются СКАНЫ):

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

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