Наш опыт применения формата WebP на сайте

На одном из наших проектов как раз возникла такая ситуация. От заказчика поступила задача довести скорость загрузки главной страницы, категории и карточки товара до необходимой отметки на Google Pagespeed Insights. В рекомендациях со стороны Google как раз было предложено оптимизировать размер изображений на сайте, чтобы снизить вес страницы.

Выбирая из различных библиотек и сервисов по сжатию изображений без потери качества (lossless) мы встретили ряд проблем, таких как:

• скорость работы библиотек и их стабильность. На наших крупных проектах это крайне критично;
  

• не все сервисы соответствуют заявленным требованиям, допуская значительную потерю качества при сжатии изображений для сайта;

• ограничения сервиса;

• финансовая стоимость решений.

‍

«Миссия нашей компании — дать больше, и мы решили попробовать относительно новый Webp (произносится как "weppy"), версия 1.0.0 которого была представлена 20.04.2018».

Сергей
‍front-end-разработчик

‍

WebP — формат сжатия изображений без потерь качества, предложенный Google inc еще в далеком 2010 году. Сервис Image Magic WebP Convert позволяет массово обрабатывать большое количество файлов. По данным Google, WebP сжимает изображения без потерь на 26% лучше, чем PNG и на 25-34% лучше чем JPEG при одинаковом индексе структурного сходства (SSIM).

‍

Технология относительно новая, но уже получила поддержку практически всех популярных браузеров, таких как:

• Google Chrome;

• Opera;

• Yandex Browser;

• Все браузеры для Android.

К сожалению, на данный момент поддержки WebP не имеют:

• Safari;

• Edge;

• Internet Explorer (IE) (и не удивительно..);

• Firefox.

На данный момент Apple и Microsoft ведут тестирование данного вида сжатия.

С большой вероятностью, при таком давлении со стороны рынка, Firefox в скором времени также обзаведется поддержкой данного формата.

В связи с возникшими трудностями совместимости с данными браузерами, было принято решение отображать на них сжатые jpg файлы, предварительно обработанные через ImageMagic.

‍

‍

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

Стоит ли формат сжатия WebP интеграции на сайт даже при условии того, что на данный момент не все браузеры его поддерживают?

Ответ — да! Однозначно.