Хочу работать у вас!

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

14/08/2018

Вес файлов на сайте стал в 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 бесконечен, как лента Мёбиуса. Технологии обновляются, меняются фреймворки, и разработчики постоянно учатся чему-то новому даже в рамках одного стека.
      Что выбрать разработчику: фриланс или работу в офисе?
      Где разработчику выгоднее и удобнее развивать свою карьеру: на фрилансе или в офисе? Рассматриваем опыт фриланса и работу в kt.team.
      Data-driven design и UX-аналитика в дизайне интернет-магазина (часть 1)
      Почему мы используем маркетинговый подход в web-дизайне (data-driven design) и как UX-исследования от Baymard помогают нам улучшать юзабилити интернет-магазинов.
      Шейминг, предрассудки и стереотипы: как на самом деле живётся девушкам в IT?
      Скандал на «Стачке» и удаление сексистского спикера. А что на самом деле происходит с женщинами в IT? Наш опыт.
      Офис для программистов: требования, примеры, опыт kt.team
      Примеры дизайна и организации пространства в офисах IT-компаний. Что и зачем нужно программистам в офисе? Сравнение мировой практики и опыта kt.team.
      Понравилась статья?

      Подпишись на нашу рассылку — стань первым, кто узнает о наборе
      на обучающие курсы, митапах и новых открытых вакансиях!