Calcweb.ru

Информационный портал
14 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Прогрессивная загрузка изображений и как её воспринимают пользователи

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

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

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

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

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

«Ненавижу сайты, которые показывают размытое изображение, пока не загрузилось основное. Приходится отводить взгляд и щуриться, чтобы читать дальше. Хочу найти способ отключить этот функционал».
— rocky 1138 , Hacker News

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— Tobias Baldauf 🥠 (@ tbaldauf ) 9 декабря, 2017

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

— Yoav Weiss (@ yoavweiss ) 9 декабря, 2017

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

Читайте так же:
Как в Chrome 76 восстановить отображение HTTPS и WWW в адресной строке

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

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

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

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

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

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

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

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

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

Изначально 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 .

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

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

Более новые альтернативы SSIM — это butteraugli (используется в кодеке Guetzli, Google’s Perceptually Guided JPEG Encoder ) и SSIMULACRA .

Заключение

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

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

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

Читайте так же:
Магазин GOG становится более социальным и вводит профили пользователей

Мы, как разработчики, должны уделять больше внимания скорости загрузки сайтов. Хорошо, что у нас есть такие инструменты, как WebPageTest и Lighthouse , помогающие измерить эффективность прогрессивных методов загрузки изображений!

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!

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

Что такое 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, совместно с обычным сжатием, может уменьшить размер файла в 2 и более раза.
  • Корректное отображение размеров. При базовом режиме сжатия верстка страницы может нарушаться, когда картинка грузится по частям. С прогрессивным сжатием такого не происходит, т.к. изображение сразу занимает положенное ему место.
  • Привлекательность. Психологически прогрессивный режим воспринимается лучше, т.к. посетителям кажется, что изображение загружается быстрее, чем в базовом режиме.
Недостатки Progressive jpeg

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

  • Скорость загрузки. Декодирование Progressive jpeg обычно происходит немного медленнее, чем у картинок, сохраненных в базовом режиме сжатия. Это особенно актуально для мобильных устройств с ограниченными ресурсами, но это перекрывается приемуществами прогрессивного сжатия.
  • Размер изображения. Не всегда размер картинок, сжатых в прогрессивном режиме, меньше. Например, прогрессивное сжатие очень маленьких изображений (миниатюр) может наоборот увеличить их размер по сравнению с базовым сжатием.
Как сжимать изображения в Progressive jpeg

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

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

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

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

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

Читайте так же:
Heroes of Might and Magic II – меч и магия в 1996
Упущенная возможность

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

Оптимизированные для веба фото — это 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 переднего плана (foreground)Отрисовка прогрессивных jpeg заднего плана (background)
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win)прогрессивно (очень быстро!)прогрессивно (очень быстро!)
Firefox (v 15.0.1 Mac, 12.0 Win)прогрессивно (очень быстро!)мгновенно после загрузки файла (медленно)
Internet Explorer 8мгновенно после загрузки файла (медленно)мгновенно после загрузки файла (медленно)
Internet Explorer 9прогрессивно (очень быстро!)мгновенно после загрузки файла (медленно)
Safari (v 6.0 Desktop, v 6.0 Mobile)мгновенно после загрузки файла (медленно)мгновенно после загрузки файла (медленно)
Opera (v 11.60)UPD: прогрессивно (очень быстро!) (proof)мгновенно после загрузки файла (медленно)

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

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

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

Читайте так же:
Как в Windows 10 сделать контекстные меню более отзывчивыми
Проверка реальностью №2

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

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

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

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

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

  1. ImageMagick — из командной строки запустите: identify -verbose mystery.jpg | grep Interlace На выходе будет или “Interlace: JPEG”, или “Interlace: None.”
  2. Photoshop — Откройте файл. Выберите File -> Save for Web & Devices. Если это прогрессивный jpeg, то флажок Progressive будет отмечен.
  3. Любой браузер — Последовательные jpeg будут загружаться сверху вниз, а прогрессивные будут вести себя по-другому. Если файл загружается слишком быстро, может понадобиться ограничение пропускной способности канала. Я использую ipfw под Mac’ом.
Проверка реальностью №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 — это будущее, а не прошлое.

Читайте так же:
Архивируем WinRAR’ом, создаем пароль, саморазархивирующийся архив, усиливаем сжатие, разбиваем на тома/архивы и не только

Прогрессивные JPEG: что это такое и как повысить производительность веб-сайта

Прогрессивные JPEG

Изучение

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

Разница между базовым JPEG и прогрессивным JPEG

Базовый JPEG и прогрессивный JPEG отличаются способом сжатия и отображения изображений, особенно если у вас медленное интернет-соединение.

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

Прогрессивные JPEG

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

Прогрессивные JPEG2

Преимущества прогрессивного JPEG

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

Большинство популярных браузеров, таких как Firefox и Chrome, также поддерживают прогрессивные изображения. Но если вы используете старую версию Internet Explorer (до Windows 7), обязательно установите последнее обновление, чтобы включить эту функцию.

Как использовать прогрессивные изображения JPEG?

Вот шаги по оптимизации вашего сайта с изображениями в прогрессивном формате JPEG:

Шаг 1. Анализ изображений JPEG

Чтобы проверить, какой тип изображений JPEG отображается на вашем веб-сайте, вы можете выполнить простой анализ с помощью WebPageTest :

Вставьте URL-адрес своего сайта в поле

1. Вставьте URL-адрес своего сайта в поле » Введите URL-адрес веб-сайта» и нажмите » Начать тестирование».

2. По завершении тестовых запусков перейдите на страницу результатов тестирования, затем выберите вкладку Performance Review. Прокрутите вниз до пункта » Использовать прогрессивный JPEG«.

В результатах будет отображаться «FAILED» для изображений Baseline JPEG, как показано ниже:

В результатах будет отображаться «FAILED» для изображений Baseline JPEG, как показано ниже

Затем вам нужно будет преобразовать их в прогрессивные JPEG.

Шаг 2: конвертируйте изображения в прогрессивный JPEG

Существуют бесплатные программы и инструменты, которые могут сделать эту работу. Наши рекомендации:

Помимо преобразования базовых изображений JPEG в прогрессивные, вы также можете уменьшить размер изображения с помощью этого инструмента. Он использует технику сжатия с потерями. Просто зайдите в Optimizila и загрузите своё изображение — до 20 изображений за один сеанс. Затем вы можете установить качество изображения перед загрузкой, но не забудьте оставить его на уровне 85 или выше для лучшего качества.

Помимо преобразования базовых изображений JPEG в прогрессивные

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

RIOT — это бесплатное программное обеспечение, которое имеет множество функций, когда дело доходит до оптимизации изображений. От создания прогрессивных изображений, настройки цветов и добавления информации о метаданных — всё можно сделать с помощью простого интерфейса. Вы также можете преобразовать изображение в три разных формата — JPEG, GIF и PNG. Более того, вы можете видеть изменения напрямую, бок о бок. Однако имейте в виду, что этот инструмент доступен только для Windows.

RIOT

Шаг 3. Замените старые изображения

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

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

Заключение

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

Чтобы проверить, содержит ли ваш веб-сайт базовые изображения JPEG, вы можете использовать инструмент WebPageTest. Если это так, вы можете преобразовать их в прогрессивный формат с помощью Optimizilla или RIOT.

голоса
Рейтинг статьи
Ссылка на основную публикацию