Блог

Я хотел бы использовать формат изображения WebP в моем background-image свойстве CSS. Но, поскольку 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 запросов, но как мне загружать изображения на основе поддержки браузера?

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

Спасибо.

@supports Вместо этого используйте CSS.

 .yourclass {
    background: url("image.jpg") no-repeat center / contain;
}

@supports (background-image: url("image.webp")) {
    .yourclass {
        background: url("image.webp") no-repeat center / contain;
    }
}
  

Не волнуйтесь. Откройте инспектор, и вы заметите, что браузер не загружает оба изображения.

Что следует учитывать:

• Обратите внимание, что вы должны объявить webp версию после jpg , или каскадный поток должен выиграть.
• Параметры background-repeat , background-position и background-size приведены только для примера.

Используйте 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@2x-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