Wyświetlanie zoptymalizowanych obrazów dekoracyjnych

Dostarczanie zoptymalizowanych obrazów dekoracyjnych za pomocą CSS poprawia postrzeganą wydajność bez pogarszania jakości wizualnej. Używając funkcji CSS image-set(), możesz udostępnić przeglądarce wiele opcji dla pojedynczego tła lub obrazu maski. Możesz określić nowoczesne formaty (takie jak AVIF lub WebP) oraz różne rozdzielczości (takie jak 1x i 2x). Przeglądarka dynamicznie wybierze najmniejszy zgodny obraz, który zapewnia odpowiednią gęstość pikseli na urządzeniu użytkownika.

UWAGA: jeśli obraz jest prawdopodobnie elementem największego wyrenderowania treści (LCP) (np. dużym banerem powitalnym), pamiętaj, że obrazy, do których odwołuje się CSS za pomocą funkcji image-set(), nie są wykrywane przez skaner wstępnego wczytywania przeglądarki. Może to znacznie opóźnić wczytywanie obrazu i negatywnie wpłynąć na LCP. W przypadku kandydatów na LCP rozważ użycie standardowego tagu HTML <img> lub <picture> albo wstępne wczytanie obrazu za pomocą opcji <link rel=preload> z atrybutem media.

Implementacja

Funkcja image-set() jest używana wszędzie tam, gdzie CSS oczekuje wartości <image>, najczęściej w background-image, content lub mask-image. Pamiętaj, że chociaż podanie zarówno formatu pliku graficznego za pomocą type(), jak i rozdzielczości (np. 1x lub 2x) daje najlepsze wyniki, oba te argumenty są opcjonalne.

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

Strategie zastępcze

W przypadku starszych przeglądarek, które nie obsługują funkcji image-set(), MUSISZ podać standardową deklarację obrazu przed regułą image-set(). Ta strategia progresywnego ulepszania opiera się na kaskadowym charakterze CSS: nieobsługiwane reguły są ignorowane.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}