Inter-Net.PRO

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

  • 402 104
16 янв 2019 11:24 - 16 янв 2019 11:26 #1 от Inter-Net PRO
Как правильно вставлять изображения формата .webp

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

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

Проблема использования формата webp заключается в том, что на данный момент он имеет слабую поддержку в браузерах, что можно увидеть здесь . Цифры конечно же огорчающие:
  • Глобальный трафик - 72% пользователей
  • Россия - 63%
  • Украина - 76% 
Если загуглить, то можно найти историю о том как основные игроки браузерного рынка 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 имеют задержку при отрисовке. И конечно же теперь вес страниц сайта стал намного меньше, а значит и быстрее. В итоге - позиции в выдаче подросли.

Авторизация

Войти через соцсети: