Получить CSS резервное фоновое изображение для загрузки только в случае сбоя основного

Question

Я работаю над оптимизацией своего сайта, поэтому преобразовываю картинки в Webp. Проблема в том, что браузеры Safari не поддерживают Webp, поэтому я должен установить для них запасной образ. В HTML это достаточно просто, просто с помощью элемента <picture>, но в CSS нет аналога. Сейчас я только что установил два фона, поэтому, если один не работает, другой покажет, например:

.header {background-image: url(images/main.webp), url(images/main.jpg); }

Проблема в том, что браузер загружает оба изображения все время, что побеждает точку оптимизации. Могу ли я сделать второе изображение для загрузки, только если первое не удается? Спасибо.

Answer 1

Я думаю, что на данный момент существует одно решение, которое делает два класса с разными URL-адресами изображений, чтобы исправить неподдерживающие браузеры для формата webp примерно так:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}