Оптимизация изображений для сайта. Или как повысить балл PageSpeed Insights

Оптимизация изображений для сайта. Или как повысить балл PageSpeed Insights
г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1

Предисловие

Изображения сегодня — неотъемлемая часть каждого интернет-ресурса. Они используются для различных целей: от мелких элементов интерфейса, до полноэкранных промо-слайдов. Но мало кто задумывается о том, что наибольшая часть интернет-трафика приходится именно на изображения. И зачастую владельцы сайтов пренебрегают их грамотной обработкой перед публикацией.

Перед тем, как использовать изображение на сайте, необходимо помнить:

  • Изображение должно быть оптимального размера (ширина и высота);
  • Изображение должно быть оптимального формата;
  • Изображение не должно иметь большой вес (МБ).

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

Если коротко, то есть 3 основных формата изображений:

  1. JPG: относительно высокое качество картинки и относительно небольшой вес файла
  2. PNG: высокое качество картинки и большой вес файла
  3. WebP: высокое качество картинки и небольшой вес файла

Оптимизация изображений

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

Формат и размеры изображений в большинстве случаев можно изменить, имея минимальный набор навыков владения условным фотошопом. Единственное — для работы с форматом WebP придётся устанавливать специальный плагин.

С оптимизацией немного сложнее. Тут придётся использовать специальные сервисы — сайты, позволяющие бесплатно оптимизировать неограниченное количество изображений, но ограниченными порциями (по 10−15 шт. за раз).

Оптимизация изображений для сайта
Optimizilla
Оптимизация изображений для сайта пример
TinyPNG
Оптимизация изображений для сайта сервисы
Compressor.io

Автоматизация оптимизации

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

В своих проектах мы используем систему управления сайтом Evolution CMS (EVO CMS). В её состав входит специальный инструмент для работы с изображениями — phpthumb. С его помощью мы автоматизируем обработку размеров и форматов изображений, чтобы минимизировать работу клиентов по подготовке и обработке изображений.

Хотя в составе phpthumb нет оптимизатора, как такового. Но с недавних пор у него появилась возможность конвертировать изображения в формат WebP, что по сути приводит к достижению тех же целей: уменьшение веса файла без потери качества.

Кстати, Evolution CMS вошла в ТОП-5 самых популярных бесплатных CMS! Подробнее с её преимуществами можно ознакомиться в нашей статье.

Преимущества формата WebP

WebP — формат сжатия изображений, разработанный компанией Google Inc в 2010 году.

По состоянию на 2021 год WebP является наиболее прогрессивным форматом изображений, вобравшим в себя основные преимущества других форматов:

  • Поддерживает 16 млн. цветов;
  • Имеет наименьший размер файла;
  • Поддерживает прозрачность;
  • Поддерживается современными браузерами;
  • Рекомендован к использованию сервисом PageSpeed Insights.

Согласно сервису Can I use, формат WebP поддерживается всеми современными версиями браузеров, но с Safari пока есть нюанс.

Оптимизация изображений для сайта macOS
Полная поддержка реализована на macOS 11 Big Sur и выше.

Это пока единственный минус у этого формата. Но инструмент phpthumb, который мы предлагаем, этот нюанс учитывает. При посещении сайта на устройствах, не поддерживающих полноценно WebP, изображения будут загружаться в общеиспользуемом формате (PNG или JPG).

WebP и скорость загрузки сайта

Как уже говорилось, формат WebP имеет наименьший размер файлов, что напрямую влияет на скорость загрузки всего сайта. В следствие этого Google настоятельно рекомендует использовать именно этот формат.

Скорость загрузки сайта проверяется сервисом PageSpeed Insights. Подробнее о его работе и значении можно прочесть в одной из предыдущих статей. Обычная замена PNG и JPG на WebP способна довольно сильно увеличить баллы PageSpeed Insights.

Давайте проверим результативность использования «ручной» оптимизации сервисом Optimizilla и сравним её с использованием phpthumb для конвертации изображений в WebP.

Оптимизация изображений для сайта скорость загрузки
Использованы исходные, не оптимизированные, изображения.
Оптимизация изображений для сайта улучшение скорости загрузки
Использованы изображения, оптимизированные сервисом Optimizilla.
Оптимизация изображений для сайта оптимизация скорости загрузки
Использована автоматическая конвертация в формат WebP инструментом phpthumb

Вывод

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

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

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

Узнать стоимость и условия

* — поля, обязательные для заполнения
г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1