Zdjęcie w formacie WebP jako background

Mam coś takiego:

background:
       /* top, transparent black, faked with gradient */ 
       linear-gradient(
         rgba(0, 0, 0, 0.5), 
         rgba(0, 0, 0, 0.5)
       ),
       /* bottom, image */
       url(../img/background/background_photo1.jpg);
   background-size: 90%;
   background-position:center;

I to zdjęcie jest dość duże, chciałbym je ładować w formacie webP.
Standardowy sposób, czyli coś takiego:

<picture>
  <source srcset="img/gallery_small/small_slider-photo1.webp" type="image/webp">
  <source srcset="img/gallery_small/small_slider-photo1.jpg" type="image/jpeg"> 
  <img src="img/gallery_small/small_slider-photo1.jpg" alt="">
</picture>

W tym wypadku chyba nie zadziała?..

ToughCaptcha napisał(a):

Mam coś takiego:

Kopiuj

background:
       /* top, transparent black, faked with gradient */ 
       linear-gradient(
         rgba(0, 0, 0, 0.5), 
         rgba(0, 0, 0, 0.5)
       ),
       /* bottom, image */
       url(../img/background/background_photo1.jpg);
   background-size: 90%;
   background-position:center;

I to zdjęcie jest dość duże, chciałbym je ładować w formacie webP.
Standardowy sposób, czyli coś takiego:

Kopiuj

<picture>
  <source srcset="img/gallery_small/small_slider-photo1.webp" type="image/webp">
  <source srcset="img/gallery_small/small_slider-photo1.jpg" type="image/jpeg"> 
  <img src="img/gallery_small/small_slider-photo1.jpg" alt="">
</picture>

W tym wypadku chyba nie zadziała?..

Użycie webp jako CSS background zadziała na przeglądarkach wspierających ten format (Chrome, Firefox, Edge). Natomiast w innych (IE, Safari) nie wyświetli się nic.

Co robić? Jak żyć?

Jest parę możliwości

• olewasz background-image i umieszczasz jako <picture> z wieloma <source> jak napisałeś powyżej. A za pomocą CSS odpowiednio ostylowujesz, tak żeby wyglądało jak tło.
• Używasz JS by sprawdzić czy przeglądarka wspiera webp, jeśli nie wspiera - podmieniasz linki, albo dodajesz odpowiednią klasę, w której wcześniej zaimplementowałeś fallbacki
• Wykrywasz czy przeglądarka wspiera webp po stronie serwera, jeśli wspiera - to wysyłasz webp, jeśli nie - jpg czy to tam innego. Tu masz przykład jak to się robi dla nginx