Используйте изображения WebP на сайте

Question

Я хочу попробовать использовать изображения в формате WebP в качестве фоновых изображений на своих веб-страницах. Но я не уверен, как сделать условие в CSS, если браузер не поддерживает формат WebP, поэтому в этом случае используйте классическое jpg-изображение. Я нахожу этот пример кода, бутон его не работает

.mybackgroundimage { 
    background-image: url("image.jpg"); 
    background-image: image("image.webp" format('webp'), "image.jpg"); 
} 

Answer 1

Вы должны использовать modernizr для обнаружения ли поддержки браузера WebP или нет, а затем применить соответствующий стиль к нему

.no-webp .mybackgroundimage 
{ 
background: url('image.jpg') no-repeat; 

} 

.webp .mybackgroundimage 
{ 
background: url('image.webp') no-repeat; 

}