Формат сжатия WebP для сайта

Формат сжатия WebP для сайта

В большинстве случае основная и первостепенная проблема долгой загрузки сайта связана с большим размером изображений. Используя советы ниже вы сможете увеличить скорость сайта за несколько минут.

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

Хотели бы чтобы ваши большие фотографии на самом деле быстро грузились и занимали мало места на хостинге? Уменьшение размера ваших изображений возможно до 70%!

Что такое WebP

Первый раз WebP анонсировала команда Google в 2010 году, представив новый формат изображений. Youtube и eBay сразу начали использовать такой формат WebP на своих сайтах.

Воспользуясь DevTools мы увидим уже на главной странице интернет-магазина eBay изображения в этом формате.

изображения webp на ebay

 

Если взглянуть на статистику, то по последним данным на httparchive.org (октябрь 2017) больше всего объём страницы увеличивают изображения. Соответственно, чтобы ваш сайт грузился очень быстро, надо с этим что-то делать. И формат изображений WebP оптимально подходит для этого.

Поддержка WebP браузерами

Не все современные браузеры поддерживают формат WebP. Например, Firefox до сих пор не знает, что это такое и как работает, ещё проблемы могут быть в Safari. Правда, есть вариант показывать обычный jpg тем браузерам, которые на поддерживают этот формат и ждать.

Согласно сайту caniuse.com мы посмотрим поддержку современными браузерами WebP:

Поддержка WebP браузерами

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

браузер Chrome монополист на рынке

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

Зайдём в аналитику и увидим, что на одном из наших проектов немного другая ситуация с браузерами. Но, если Yandex Browser ещё и можно не брать в расчёт, потому что он использует базу хрома, то, если мы переведём все картинки этого проекта в WebP без учёта Safari, у нас могут быть проблемы с отображением и потерей потенциальных клиентов.

аналитика использования браузера

Всегда смотрите аналитику того проекта, который вы хотите перевести на новую технологию.

Конвертер WebP

Для теста сжатия ваших больших и красивых изображений рекомендую воспользоваться сайтом shortpixel.com

Мой тест ужал изображение jpg в webp с уменьшением размера в 92% с 0.98мб до 77 кб. При всём при том качество изображения осталось неизменным.

Конвертер WebP

Кстати, на этом сайте выходное изображение выдаётся в формате jpg, поэтому проблем с отображением на таких браузерах как Firefox или Safari быть не должно.

Проверьте ваш сайт

..может вам WebP и не надо.

Откройте в вашем браузере DevTools и выберите вкладку Audits (Аудиты). Браузер просканирует ваш сайт и покажет текущие проблемы.

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

 

DevTools Audits (Аудиты)

Будем работать с WebP теснее.

Если вам не хочется настраивать сжатие, можно сжимать фотографии с помощью online-сервисов.

Наши другие полезные статьи