Как вставить .webp изображения через background?

Question

[hellcaster]

Как вставить .webp изображения через background? Вы скажете

"Что за бред? Пишешь background: url(img/image.webp); Профит!"

Я что если пользователь зайдет через Firefox или другой браузер, который не поддерживает .webp? Можно как-то вставить .webp изображение, а если оно не загрузиться, то использовать png/jpg, только без скриптов (если без скриптов никак, то какой скрипт)?

Что-то типо этого, только на css

<picture class="information__image">
    <source type="image/webp" srcset="img/phones/phone1.webp 1x, img/phones/[e-mail] 2x, img/phones/[e-mail] 3x">
    <source type="image/png" srcset="img/phones/phone1.png 1x, img/phones/[e-mail] 2x, img/phones/[e-mail] 3x">
    <img src="img/phones/phone1.png" alt="text">
</picture>

Answer 1

[Павел]

Создайте функцию проверки

function ThisIsWebP() {
    var def = $.Deferred(), crimg = new Image();
    crimg.onload = function() { def.resolve(); };
    crimg.onerror = function() {def.reject(); };
    crimg.src = "https://simpl.info/webp/cherry.webp";
    return def.promise();
}

И проверяем:

ThisIsWebP().then(function() {
    //Есть поддержка webp
}, function() {
   //Нет поддержки webp
});

Comments

[foterio]

Красивое решение, по идее cherry.webp может быть одним пикселем (картинкой 1x1).
Но на самом деле странно, что приходиться использовать костыли на js.

Answer 2

[foterio]

В своих проектах я использую такие css

Это для google chrome
background-image: url("some-image.webp");

Это для Safari
background-image: image-set(url(some-image.jpg) 1x);

Не проверял работает ли в firefox

Comments

[hellcaster]

По данным CanIUse поддержка не очень хорошая

[foterio]

Проверил firefox да действительно не работает, ну а пользователи IE по дефолту должны страдать.

В остальном, например, CanIUse пишет что для safari нужен префикс -webkit, но это не так. Я проверял на разных айфонах, а так же на Mac OS Catalina и High Sierra в Safari все работает без префикса.

Тут уже выступает принцип Парето. Лучше сделать для 80% пользователей рабочий вариант и двигаться дальше, чем неделями сидеть думать как с firefox поступить.
В худшем случае если правильно писать стили, то пользователи firefox увидят
background-color: #ffffff;

В общем, есть над чем подумать, может есть какое решение для firefox.

[hellcaster]

ну а пользователи IE по дефолту должны страдать

Звучит как программистский расизм))