Прогрессивные 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 :

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

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

Читайте также:  Что означает ошибка 404 в Nginx?

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

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

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

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

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

1. Optimizilla

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

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

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

2. RIOT

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

RIOT

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

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

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

Заключение

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

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

Читайте также:  Используйте автоматизацию сценариев Python для получения изображений из NASA

Поделитесь с нами своими мыслями об этом уроке в комментариях ниже!

Оцените статью
bestprogrammer.ru
Добавить комментарий