Что такое progressive 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 и как внедрить его на свой сайт. Возможно, именно вы позитивно повлияете на его популярность в интернете.
Прогрессивная загрузка изображений и как её воспринимают пользователи
Этот приём улучшает восприятие веб-страниц пользователями?
Быстрый рендеринг всегда лучше медленного. Главное — вывести на экран хоть что-то, пусть это и не готовый контент.
Исследования о восприятии пользователями
Назад к основам: прогрессивный JPEG
Прогрессивный JPEG часто называют одним из лучших форматов изображений. Особенно для сайтов, на которые заходит большое количество пользователей с медленным подключением. Энн Робсон написала пост в поддержку прогрессивного JPEG ещё пять лет назад, подытожив его преимущества:
Прогрессивный JPEG кодирует изображения, разбивая их на несколько сканов. Первый скан выводит изображение с низкой степенью детализации, которая повышается, когда загружаются дополнительные сканы. Альтернатива прогрессивному — « базовый » режим, когда изображение загружается последовательно сверху вниз.
Базовое кодирование JPEG — изображения
Прогрессивное кодирование JPEG — изображения
Исследование
Мне удалось найти только одно исследование по теме, озаглавленное «Прогрессивный рендеринг изображений: добро или зло?»
Недавно я упомянул об этом исследовании в дискуссии, посвящённой LQIP (« изображениям-заглушкам низкой детализации», от английского Low-Quality Image Placeholders ). Сразу в нескольких ответах прозвучали сомнения в научной строгости исследования :
Многие ставили под сомнение состоятельность этой работы. Она идёт вразрез со всеми общепринятыми представлениями о пользе прогрессивного рендеринга, и пока что никто не представил второго исследования с похожими результатами. Нужно больше данных.
— Tobias Baldauf 🥠 (@ tbaldauf ) 9 декабря, 2017
Ограниченное и спорное исследование. Чтобы делать какие-либо выводы, нужны большие объёмы данных.
— Yoav Weiss (@ yoavweiss ) 9 декабря, 2017
Получается, что на данный момент существует только одно исследование, и то воспринятое с изрядной долей скепсиса. Возникает вопрос: можно ли измерить субъективную скорость загрузки с помощью существующих инструментов?
Измеряем субъективную скорость загрузки
Представим две следующих раскадровки, записанных с некого сайта:
Схема загрузки одного и того же сайта.
В некотором роде это похоже на ситуацию с прогрессивными изображениями, только в более крупном масштабе — загрузить контент как можно быстрее, пусть и неокончательную его версию.
Чтобы оценить, как быстро загружается страница, сегодня используются такие показатели, как индекс скорости ( Speed Index ). Он измеряет процент того, насколько визуально закончена загрузка страницы. Чем ниже результат, тем лучше:
Формула индекса скорости
Я решил испытать, как работает с заглушками низкой детализации тест WebPagetest :
Раскадровка, демонстрирующая степень визуальной завершённости в процентах.
Мы видим, что изображение загружается между 8 и 10 секундами. Размытая заглушка увеличивает процент завершённости с 75 до 83. Загрузка окончательной версии изображения доводит эту цифру до 93%.
После выполнения проверка выдаёт вот такой отчёт:
Обратите внимание на размытую заглушку, которая затем превращается в финальное изображение.
Подход Speed Index с измерением схожести пикселей ( та самая «средняя разница гистограмм ») имеет свои недостатки. К примеру, он не учитывает визуальную схожесть фигур, цветов и объектов.
Четыре разных фигуры с одинаковым количеством чёрных и белых пикселей.
В большинстве случаев это не сильно повлияет на оценку визуальной завершённости — на практике Speed Index и Perceptual Speed Index в значительной степени совпадают.
«В ходе масштабных исследований (с использованием собранных WebPagetest видеозаписей более чем 500 страниц из мобильного рейтинга Alexa ) мы увидели, что SI и PSI демонстрируют линейную корреляцию с коэффициентом 0,91», — Измерение скорости загрузки видимой части страницы при помощи P erceptual Speed Index ( PSI )
Perceptual Speed Index («Субъективный индекс скорости»)
Воспроизведение двух изображений при помощи треугольников. Чем больше фигур используется, тем ближе изображение к оригиналу.
Заключение
Довольно сложно воссоздать восприятие пользователя. Нам кажется, что лучше показать что-то раньше, пусть это будет и не окончательный вариант контента. Но некоторые пользователи с этим не согласны.
Преимущество прогрессивной загрузки изображений — возможность измерить её инструментами, основанными на восприятии пользователя. Они дают нам конкретные результаты. Они хорошо сочетаются с рабочим процессом, и никуда не исчезнут в обозримом будущем.
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!
Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, лайки, отклики!
Прогрессивные JPEG: что это такое и как повысить производительность веб-сайта
Изображение прогрессивного JPEG кодируется иначе, чем стандартное или базовое изображение JPEG. Он загружается последовательными волнами, пока не будет сформировано чёткое изображение. Это может улучшить производительность веб-сайта, поскольку кажется, что изображения загружаются быстрее.
Разница между базовым JPEG и прогрессивным JPEG
Базовый JPEG и прогрессивный JPEG отличаются способом сжатия и отображения изображений, особенно если у вас медленное интернет-соединение.
Стандартный формат JPEG загружает изображения по одной строке, сверху вниз, и каждая строка уже идеально подходит для пикселей. Следовательно, для полной загрузки изображения может потребоваться некоторое время.
Что касается прогрессивного JPEG, изображение появляется сразу как единое целое, но сначала оно будет размытым и пиксельным. Постепенно вы увидите чёткое и полностью загруженное изображение.
Преимущества прогрессивного JPEG
На веб-сайте прогрессивный JPEG может улучшить работу пользователей. Несмотря на размытость, посетители уже могут увидеть всё изображение с первого взгляда. Кроме того, будучи обычно меньшим по размеру, прогрессивный JPEG также может уменьшить использование ресурсов, таких как пропускная способность и дисковое пространство, помогая вашему веб-сайту загружаться быстрее.
Большинство популярных браузеров, таких как Firefox и Chrome, также поддерживают прогрессивные изображения. Но если вы используете старую версию Internet Explorer (до Windows 7), обязательно установите последнее обновление, чтобы включить эту функцию.
Как использовать прогрессивные изображения JPEG?
Вот шаги по оптимизации вашего сайта с изображениями в прогрессивном формате JPEG:
Шаг 1. Анализ изображений JPEG
Чтобы проверить, какой тип изображений JPEG отображается на вашем веб-сайте, вы можете выполнить простой анализ с помощью WebPageTest :
1. Вставьте URL-адрес своего сайта в поле » Введите URL-адрес веб-сайта» и нажмите » Начать тестирование». 
2. По завершении тестовых запусков перейдите на страницу результатов тестирования, затем выберите вкладку Performance Review. Прокрутите вниз до пункта » Использовать прогрессивный JPEG«.
В результатах будет отображаться «FAILED» для изображений Baseline JPEG, как показано ниже:
Затем вам нужно будет преобразовать их в прогрессивные JPEG.
Шаг 2: конвертируйте изображения в прогрессивный JPEG
Существуют бесплатные программы и инструменты, которые могут сделать эту работу. Наши рекомендации:
Помимо преобразования базовых изображений JPEG в прогрессивные, вы также можете уменьшить размер изображения с помощью этого инструмента. Он использует технику сжатия с потерями. Просто зайдите в Optimizila и загрузите своё изображение — до 20 изображений за один сеанс. Затем вы можете установить качество изображения перед загрузкой, но не забудьте оставить его на уровне 85 или выше для лучшего качества.
После обработки ваше изображение будет как прогрессивным, так и меньшим по размеру.
RIOT — это бесплатное программное обеспечение, которое имеет множество функций, когда дело доходит до оптимизации изображений. От создания прогрессивных изображений, настройки цветов и добавления информации о метаданных — всё можно сделать с помощью простого интерфейса. Вы также можете преобразовать изображение в три разных формата — JPEG, GIF и PNG. Более того, вы можете видеть изменения напрямую, бок о бок. Однако имейте в виду, что этот инструмент доступен только для Windows.
Шаг 3. Замените старые изображения
После преобразования вам необходимо обновить изображения на вашем сайте. Вы можете получить доступ к файловому менеджеру вашего хостинга или использовать FTP- клиент, чтобы найти существующие базовые изображения. Удалите и замените их изображениями в прогрессивном формате JPEG.
Чтобы избежать технических проблем, обязательно используйте одно и то же имя файла для каждого изображения. Теперь снова протестируйте свой сайт с помощью WebPageTest. Если вы выполните процесс правильно, вы не найдёте базовых изображений JPEG в результатах производительности.
Заключение
Если вы хотите, чтобы изображения на вашем веб-сайте загружались быстрее, лучше преобразовать их в прогрессивный формат JPEG. Он работает путём загрузки изображений последовательными волнами. Сначала вы увидите размытое или пиксельное изображение, но оно исчезнет.
Чтобы проверить, содержит ли ваш веб-сайт базовые изображения JPEG, вы можете использовать инструмент WebPageTest. Если это так, вы можете преобразовать их в прогрессивный формат с помощью Optimizilla или RIOT.
Поделитесь с нами своими мыслями об этом уроке в комментариях ниже!
Что такое прогрессивный 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.
Вы также можете обратиться в нашу техподдержку, и мы выполним сжатие изображений на ваших сайтах в рамках акции по бесплатной оптимизации сайта.