Сайт

Ускорение Работы Сайта – Сжатие JPEG изображений

ускорение работы сайта - сжатие jpeg изображений

Введение

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

В чем разница между последовательными и прогрессивными JPEG изображениями?

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

Цикл загрузки последовательных JPEG:

обычный jpeg

Цикл загрузки прогрессивных JPEG:

прогрессивный jpeg

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

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

ВАЖНО! Некоторые браузеры (например Internet Explorer перед Windows 7) не поддерживали прогрессивные изображения. Однако все более поздние версии их поддерживают.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • FTP доступ

Шаг 1 — Анализ вашего сайта

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

Здесь представлены результаты Performance Review (Обзора производительности) после анализа сайта:

webpage test сжатие jepg

Шаг 2 — Скачивание прогрессивных JPEG изображений

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

Вариант 1 — Сжатие JPEG в прогрессивный формат с помощью WebPageTest.org

После поиска списка изображений, которые могут быть заменены, перейдите в раздел Details (Детали) и нажмите View All Images (Просмотреть Все Изображения)

сжатие jpeg просмотра всех изображений

Этот раздел отобразит все изображения на вашей странице. Нажмите Analyze JPEG (Проанализировать JPEG) на каждом из изображений найденном в Шаге 1 этого руководства и прокрутите страницу вниз.

analyze jpeg

Здесь вы должны найти Quality 85 Image (Качество 85) вашего изначального изображения. Сохраните все Quality 85 изображения на ваш компьютер и приступите к следующему Шагу. Мы рекомендуем сохранять изображения с теми же именами, что и оригинальные, для облегчения процесса замены.

Вариант 2 — Конвертирование последовательных JPEG в прогрессивные с помощью Optimizilla

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

optimizilla качество 85

ВАЖНО! Выставление значения меньше 85 может привести к потере качества.

Вариант 3 — Оптимизация изображений при помощи CMS плагинов

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

Шаг 3 — Замена старых изображений

ВАЖНО! Перед началом убедитесь, что сделали резервную копию вашего сайта или изображений, которые вы планируете заменить.

Найдите изображения из Шага 1 используя Файловый менеджер или любой FTP-клиент. Удалите и замените их новыми прогрессивными JPEG полученными в Шаге 2. Еще раз убедитесь, что они имеют те же имена для избежания ошибок 404 или проблем с отображением.

Шаг 4 — Тестирование изменений

Как только прогрессивные изображения загружены, очистите кэш браузера и откройте ваш сайт для проверки правильности их загрузки. После этого, вы можете проанализировать ваш сайт в WebPageTest.org, чтобы убедиться в правильности проделанных действий. Вот результаты которые вы должны увидеть в разделе Details (Детали):

webpage test jpeg

Заключение

В этом руководстве вы узнали, как ускорить работу вашего сайта путем сжатия JPEG изображений. Чем плавнее визуальное восприятие, тем больше шансов того, что вы и ваши посетители останетесь довольны. Помимо этого, вы сокращаете использование ресурсов, улучшаете SEO и производительность сайта. Это действительно беспроигрышная ситуация для всех.

Руководства по теме:

Добавить комментарий

Нажмите здесь, чтобы оставить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00