web_Developer_Victor
@web_Developer_Victor
Что такое google?

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

Как вставить .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/phone1@2x.webp 2x, img/phones/phone1@3x.webp 3x">
    <source type="image/png" srcset="img/phones/phone1.png 1x, img/phones/phone1@2x.png 2x, img/phones/phone1@3x.png 3x">
    <img src="img/phones/phone1.png" alt="text">
</picture>

  • Вопрос задан
  • 6469 просмотров
Решения вопроса 2
PavelMonro
@PavelMonro
Создайте функцию проверки
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
});
Ответ написан
@foterio
В своих проектах я использую такие css

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

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

Не проверял работает ли в firefox
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы