Как загрузить форматы изображений на основе поддержки браузера с помощью CSS?

Question

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

Я знаю, что могу использовать тег <picture>, чтобы сделать это следующим образом:

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg">
</picture>

И это заставит браузер загрузить первый поддерживаемый формат. Но можно ли добиться того же эффекта каким-либо образом, используя только CSS, поскольку я задаю фоновое изображение с помощью свойства background-image? Я знаю, что могу выбирать изображения на основе размера экрана, используя запросы @media, но как мне загружать изображения на основе поддержки браузера?

Я пытался найти решение, но не смог его найти. Дайте мне знать, если это дубликат, и решение уже существует.

Спасибо.

Answer 1

Используйте 2 фоновых изображения: одно с JPG или PNG, другое с WEBP, браузер автоматически выберет лучшее.

Найден этот код на codepen: Robin Rendle

CSS:

element {
  width: 50vw;
  height: 100vh;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup%402x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.jpg');
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup@2x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.webp');
}

https://codepen.io/robinrendle/pen/ORmzJY