Предисловие
Изображения сегодня — неотъемлемая часть каждого интернет-ресурса. Они используются для различных целей: от мелких элементов интерфейса, до полноэкранных промо-слайдов. Но мало кто задумывается о том, что наибольшая часть интернет-трафика приходится именно на изображения. И зачастую владельцы сайтов пренебрегают их грамотной обработкой перед публикацией.
Перед тем, как использовать изображение на сайте, необходимо помнить:
- Изображение должно быть оптимального размера (ширина и высота);
- Изображение должно быть оптимального формата;
- Изображение не должно иметь большой вес (МБ).
Вопрос правильного подбора формата и размеров мы уже освещали в одной из предыдущих статей. Советуем ознакомиться.
Если коротко, то есть 3 основных формата изображений:
- JPG: относительно высокое качество картинки и относительно небольшой вес файла
- PNG: высокое качество картинки и большой вес файла
- WebP: высокое качество картинки и небольшой вес файла
Оптимизация изображений
Оптимизация изображений — процесс, при котором происходит уменьшение веса файла без уменьшения его размеров и без потери качества.
Формат и размеры изображений в большинстве случаев можно изменить, имея минимальный набор навыков владения условным фотошопом. Единственное — для работы с форматом WebP придётся устанавливать специальный плагин.
С оптимизацией немного сложнее. Тут придётся использовать специальные сервисы — сайты, позволяющие бесплатно оптимизировать неограниченное количество изображений, но ограниченными порциями (по 10−15 шт. за раз).
Автоматизация оптимизации
Чтобы настроить полноценную автоматизированную оптимизацию, придётся либо приобрести соответствующую программную библиотеку, либо оформить подписку на её использование. Хороших бесплатных решений нет. Помимо этого придётся прибегнуть к помощи разработчиков для настройки работы библиотеки с вашим сайтом.
В своих проектах мы используем систему управления сайтом 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 пока есть нюанс.
Это пока единственный минус у этого формата. Но инструмент phpthumb, который мы предлагаем, этот нюанс учитывает. При посещении сайта на устройствах, не поддерживающих полноценно WebP, изображения будут загружаться в общеиспользуемом формате (PNG или JPG).
WebP и скорость загрузки сайта
Как уже говорилось, формат WebP имеет наименьший размер файлов, что напрямую влияет на скорость загрузки всего сайта. В следствие этого Google настоятельно рекомендует использовать именно этот формат.
Скорость загрузки сайта проверяется сервисом PageSpeed Insights. Подробнее о его работе и значении можно прочесть в одной из предыдущих статей. Обычная замена PNG и JPG на WebP способна довольно сильно увеличить баллы PageSpeed Insights.
Давайте проверим результативность использования «ручной» оптимизации сервисом Optimizilla и сравним её с использованием phpthumb для конвертации изображений в WebP.
Вывод
К подготовке изображений для публикации на сайте необходимо подходить ответственно. Не стоит использовать изображения большего размера, чем это необходимо. Не стоит загружать картинки чересчур высокого качества, которые неоправданно сжигают интренет-трафик посетителей. Всегда необходимо искать золотую середину, чтобы изображения были как качественными, так и маловесными.
Для достижения этих целей можно подготавливать изображения вручную. Корректировать ширину, высоту и формат файлов через условный фотошоп, а также прогонять их оптимизатором.
Но когда изображений достаточно много и их обновление на сайте происходит регулярно, можно полностью переложить эту работу на автоматизированный инструмент, работу которого наши разработчики смогут настроить под нужды любого проекта.
Надеемся, что статья была для вас полезной и полученная информация поможет вам в будущем. А ещё мы будем рады помочь вам в вопросах SEO-продвижения, рекламы в интернете, разработки сайтов и запуска продаж на маркетплейсах. Оставляйте заявку ниже:
