Задать вопрос
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>

  • Вопрос задан
  • 6661 просмотр
Подписаться 3 Простой Комментировать
Решение пользователя foterio К ответам на вопрос (2)
@foterio
В своих проектах я использую такие css

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

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

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