La pubblicazione di immagini decorative ottimizzate tramite CSS migliora le prestazioni percepite senza sacrificare la qualità visiva. Utilizzando la funzione CSS image-set(), puoi fornire al browser più opzioni per una singola immagine di sfondo o maschera. Puoi specificare formati moderni (come AVIF o WebP) insieme a risoluzioni diverse (come 1x e 2x). Il browser selezionerà dinamicamente l'immagine compatibile più piccola che fornisce la densità di pixel appropriata per il dispositivo dell'utente.
ATTENZIONE: se è probabile che l'immagine sia l'elemento Largest Contentful Paint (LCP), ad esempio un banner hero di grandi dimensioni, tieni presente che le immagini a cui viene fatto riferimento nel CSS tramite image-set() non sono rilevabili dallo scanner di precaricamento del browser. Ciò può ritardare notevolmente il caricamento delle immagini e danneggiare l'LCP. Per i candidati LCP, valuta la possibilità di utilizzare un tag HTML <img> o <picture> standard o, in alternativa, di precaricare l'immagine utilizzando anche l'opzione <link rel=preload> con un attributo media.
Implementazione
La funzione image-set() viene utilizzata ovunque CSS preveda un valore <image>, più comunemente in background-image, content o mask-image. Tieni presente che, sebbene l'indicazione sia del formato dell'immagine tramite type() sia della risoluzione (ad esempio 1x o 2x) produca i risultati migliori, entrambi questi argomenti sono facoltativi.
.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 di riserva
Per i browser meno recenti che non supportano la funzione image-set(), DEVI fornire una dichiarazione dell'immagine standard prima della regola image-set(). Questa strategia di potenziamento progressivo si basa sulla natura a cascata del CSS: le regole non supportate vengono ignorate.
.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
);
}