Вставка изображений формата 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 имеют задержку при отрисовке. И конечно же теперь вес страниц сайта стал намного меньше, а значит и быстрее. В итоге - позиции в выдаче подросли.