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

admin

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

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

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

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

Источник: inter-net.pro