Zdjęcie w formacie WebP jako background

0

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?..

1
ToughCaptcha napisał(a):

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?..

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1