Многие браузеры сегодня уже вполне спокойно читают форма webp. Однако еще немало динозавров среди них, не умеющих читать этот формат. Поэтому, если просто разместить на странице сайта картинку в формате webp, то, открыв в таком браузере страницу вашего сайта, посетитель не увидит картинку. Поэтому пока приходится подстраиваться под отстающих – добавлять дубль картинки в привычном формате. При этом браузер загрузит только одну из них – ту, которую он в состоянии отобразить.
Добавить картинки в формате webp на страницу сайта можно следующим образом
<picture> <source srcset="screen.webp" type="image/webp" > <source srcset="screen.jpg" type="image/jpeg" > <img src="screen.jpg" alt="" > </picture>
Чуть посложнее дело обстоит с добавлением картинок в формате webp в качестве фоновых. Пока в css нет возможности распознавать, поддерживается ли браузером данный формат картинок или нет. Поэтому приходится идти обходным путем. И тут нам на помощь приходит javascript.
Один из путей – воспользоваться библиотекой modernizr – https://modernizr.com/download . Для наших целей достаточно выбрать одну опцию – webp. После скачивания и подключения скрипта к странице сайта к тегу <html> будет добавлен один из классов (в зависимости от того, читает ли браузер посетителя формат webp или не читает) – webp или no-webp. Ну, а далее уже, применяя в стилях эти классы, можно назначить в качестве фоновой картинку соответствующего формата.