Вставка изображений формата webp

Как правильно делать вставку изображений формата webp, который не просто продвигает но и настоятельно рекомендует Google в своём сервисе Page Speed.

Вставка изображений формата webp

Если вы анализируете оптимизацию и скорость страницы сайта в инструменте Google PageSpeed, то очень вероятно что вы заметили то, что гугл объявил войну изображениям формата .png, указывая в рекомендациях что данный формат является устаревшим.

  Вместо .png Google рекомендует для изображений использовать формат .webp. Кстати, этот формат разработан самим гуглом и по возрасту ему уже более 10 лет. В браузерах Chrome, Opera и Android Browser формат webp полностью поддерживается c 2012 года.

  Действительно, формат WEBP делает изображения в 10 раз легче чем PNG, при этом он поддерживает альфа-канал (прозрачный фон).

  Проблема использования формата webp заключается в том, что на данный момент он имеет слабую поддержку в браузерах, что можно увидеть здесь. Цифры конечно же огорчающие:

  • Глобальный трафик - 80.5% пользователей
  • Россия - 69%
  • Украина - 84%

  Если загуглить, то можно найти историю о том как основные игроки браузерного рынка Firefox и Microsoft изначально не поддержали предложение Гугла по введению формата webp. Но всё таки ситуация изменилась и в конце 2018 года Firefox и Microsoft заявили что введут поддержку webp в свои браузеры. Так в браузере Edge полная поддержка webp уже введена с 18 версии, а в Firefox будет вместе выходом версии 65. Что касается браузера Safari, то теперь он никуда не денется и будет просто вынужден ввести поддержку webp.

Всё это про слабую поддержку я специально упомянул, чтобы вы понимали что обычная вставка изображения формата webp по схеме:

<img src="images/name.webp" alt="описание" />

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

Как же быть?

В HTML 5 есть замечательный тег picture. Он позволяет делать различные манипуляции с медиа-форматами, например:

  • выводить под размеры экрана заданное изображение - можно для мобильных устройств выводить картинку шириной например 320px, а для компьютеров шириной 1200px. Вот вам прямой адаптив и оптимизация.
  • можно выводить поддерживаемый браузером формат - с тем же webp задать, что если браузер его поддерживает, то его загружает, а если не поддерживает, то загружает изображение формата jpg или png.

Вставка изображений формата webp с использованием тега picture в HTML выглядит так:

<picture>
   <source srcset="images/name.webp" type="image/webp">
   <img src="images/name.jpg" alt="описание" />
</picture>

 

Ну а если мы хотим прописать зависимость от размера экрана пользователя, тогда добавляем media запросы:

<picture>
   <source srcset="images/small_name.webp" media="(max-width: 560px)" type="image/webp">
   <source srcset="images/small_name.jpg" media="(max-width: 560px)">
   <source srcset="images/name.webp" type="image/webp">
   <img src="images/name.jpg" alt="описание" />
</picture>

  В заключение хочу сказать, что я уже 2 месяца использую формат webp, почти сразу как Google PageSpeed сменил интерфейс и начал указывать что формат png является устаревшим. Очевидно, что браузер гугл-хром которым я пользуюсь очень дружелюбный к формату webp. Отрисовка webp происходит мгновенно, jpg и тем более png имеют задержку при отрисовке. И конечно же теперь вес страниц сайта стал намного меньше, а значит и быстрее. В итоге - позиции в выдаче подросли.

 

 

Комментарии 8
11:33 29.02.2020 #
<picture>
   <source srcset="https://2.bp.blogspot.com/-_VwlR3RnKmM/WcZTyfb1sdI/AAAAAAAAJVs/lHVyop9b5mYr_h4mKAhiHDmXHRj7mD2sQCLcBGAs/s1600/kopka-transhei.webp" type="image/webp">
   <img src="https://2.bp.blogspot.com/-_VwlR3RnKmM/WcZTyfb1sdI/AAAAAAAAJVs/lHVyop9b5mYr_h4mKAhiHDmXHRj7mD2sQCLcBGAs/s1600/kopka-transhei.JPG" alt="описание" />
</picture>

и к чему этот развод? обе картинки весят по 49,8 KB (51 048 bytes) - где ваш изюм?

11:37 29.02.2020 #

В чём развод? Гугл навязывает этот формат а не я.

11:37 29.02.2020 #

а где сжатие

11:42 29.02.2020 #

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

11:44 29.02.2020 #

Бывают изображение где сжатие идёт в два-три раза. Бывает всего пару кило. Но алгоритмы у железяки которая занимается выдачей прописаны с любовью к webp.

Год или два назад гугл в том же спидтесте насидал с этим форматом. Тут чисто рабочий снипет для себя.

А в нос нужно бить не меня, а тех кто пишет алгоритмы.

Даёт ли оптимизация места в выдаче? - Да, даёт.

Стоит ли с этим упарываться? - Да, в настоящее время стоит.

11:53 29.02.2020 #

где сжатие - скорость не добавляется а наоборот уменьшается - эта страница написана чисто под запрос но решения вопроса здесь нет

12:15 29.02.2020 #

Есть такой формат png, это там где поддерживается прозрачный фон. webp тоже поддерживает прозрачный фон. Он лучше сжимается и легче чем png. Если не ошибаюсь, тот же спидтест уже помечает png как устаревшим и рекомендует его менять на webp.

Проблема в том что у какого то процента пользователей старые браузеры где webp не поддерживается. Отсюда эта конструкция пикчер.

А на формат jpg никто не говорит что он устаревший. Но дело в том, что jpg не поддерживает прозрачный фон.

12:19 29.02.2020 #

Кста у меня написано что для png. Просто в примере кода для picture проставлен jpg. Но всё вступление статьи посвящено именно устареванию формата png.


*** чтобы писать комментарии.