Подпишитесь на нашу рассылку!
Будьте в курсе новостей мира разработки и менеджмента, узнайте первыми о наших новых кейсах, событиях и личном опыте!
14/08/2018

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

Вес файлов на сайте стал в 2 раза ниже!
Зачастую, работая над оптимизацией сайта, мы сталкиваемся с проблемой увеличения скорости загрузки страницы. Особую сложность вызывает уменьшение веса страницы за счет сжатия изображений на сайте.

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

Выбирая из различных библиотек и сервисов по сжатию изображений без потери качества (lossless) мы встретили ряд проблем, таких как:
  • скорость работы библиотек и их стабильность. На наших крупных проектах это крайне критично;

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

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

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

Сергей
front-end-разработчик
«Миссия нашей компании — дать больше, и мы решили попробовать относительно новый Webp (произносится как "weppy"), версия 1.0.0 которого была представлена 20.04.2018».
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
      PNG
      JPG
      Сжатие с потерями
      Сжатие без потерь
      Прозрачность
      Анимация
      Таким образом, применив формат сжатия WebP, мы смогли увеличить скорость загрузки страницы согласно рекомендациям по оптимизации сайта. Также, принятые изменения позволяют выдерживать большую нагрузку на сайт по посетителям. При нахождении на сайте одновременно даже более 1000 человек, скорость загрузки поддерживается на высоком уровне.

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

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

      Поделиться

      Понравилась статья?

      Подпишитесь на наши новости — будьте в курсе самых интересных и полезных новостей IT-сферы.
      Читайте также:

      Почему мы используем маркетинговый подход в web-дизайне (data-driven design) и как UX-исследования от Baymard помогают нам улучшать юзабилити интернет-магазинов.

      Избегаем типовых ошибок юзабилити в интерфейсе интернет-магазинов с помощью UX-аналитики. Обзор возможностей Baymard Institute для data-driven design.

      Разбираем типичные ошибки: на что стоит обратить внимание при редизайне в e-Commerce. Полезно и владельцам интернет-магазинов, и самим дизайнерам.

      Актуальный во всём мире тренд B2B — электронная торговля. В России она пока не так популярна. Разбираемся, почему, и рассказываем, как B2B-порталы работают с задачами менеджмента и маркетинга.

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