Изображение прогрессивного 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
Существуют бесплатные программы и инструменты, которые могут сделать эту работу. Наши рекомендации:
1. Optimizilla
Помимо преобразования базовых изображений JPEG в прогрессивные, вы также можете уменьшить размер изображения с помощью этого инструмента. Он использует технику сжатия с потерями. Просто зайдите в Optimizila и загрузите своё изображение — до 20 изображений за один сеанс. Затем вы можете установить качество изображения перед загрузкой, но не забудьте оставить его на уровне 85 или выше для лучшего качества.
После обработки ваше изображение будет как прогрессивным, так и меньшим по размеру.
2. RIOT
RIOT — это бесплатное программное обеспечение, которое имеет множество функций, когда дело доходит до оптимизации изображений. От создания прогрессивных изображений, настройки цветов и добавления информации о метаданных — всё можно сделать с помощью простого интерфейса. Вы также можете преобразовать изображение в три разных формата — JPEG, GIF и PNG. Более того, вы можете видеть изменения напрямую, бок о бок. Однако имейте в виду, что этот инструмент доступен только для Windows.
Шаг 3. Замените старые изображения
После преобразования вам необходимо обновить изображения на вашем сайте. Вы можете получить доступ к файловому менеджеру вашего хостинга или использовать FTP- клиент, чтобы найти существующие базовые изображения. Удалите и замените их изображениями в прогрессивном формате JPEG.
Чтобы избежать технических проблем, обязательно используйте одно и то же имя файла для каждого изображения. Теперь снова протестируйте свой сайт с помощью WebPageTest. Если вы выполните процесс правильно, вы не найдёте базовых изображений JPEG в результатах производительности.
Заключение
Если вы хотите, чтобы изображения на вашем веб-сайте загружались быстрее, лучше преобразовать их в прогрессивный формат JPEG. Он работает путём загрузки изображений последовательными волнами. Сначала вы увидите размытое или пиксельное изображение, но оно исчезнет.
Чтобы проверить, содержит ли ваш веб-сайт базовые изображения JPEG, вы можете использовать инструмент WebPageTest. Если это так, вы можете преобразовать их в прогрессивный формат с помощью Optimizilla или RIOT.
Поделитесь с нами своими мыслями об этом уроке в комментариях ниже!
