La diffusion d'images décoratives optimisées via CSS améliore les performances perçues sans sacrifier la qualité visuelle. La fonction CSS image-set() vous permet de fournir au navigateur plusieurs options pour une même image d'arrière-plan ou de masque. Vous pouvez spécifier des formats modernes (comme AVIF ou WebP) ainsi que différentes résolutions (comme 1x et 2x). Le navigateur sélectionnera de manière dynamique l'image compatible la plus petite qui fournit la densité de pixels appropriée pour l'appareil de l'utilisateur.
ATTENTION : Si l'image est susceptible d'être l'élément Largest Contentful Paint (LCP) (par exemple, une grande bannière principale), sachez que les images référencées dans le CSS via image-set() ne sont pas détectables par l'analyseur de préchargement du navigateur. Cela peut retarder considérablement le chargement des images et nuire au LCP. Pour les candidats LCP, envisagez d'utiliser une balise HTML <img> ou <picture> standard, ou de précharger l'image à l'aide de l'option <link rel=preload> avec un attribut media.
Implémentation
La fonction image-set() est utilisée partout où le CSS attend une valeur <image>, le plus souvent dans background-image, content ou mask-image. Notez que même si vous obtenez de meilleurs résultats en fournissant à la fois le format d'image via type() et la résolution (comme 1x ou 2x), ces deux arguments sont facultatifs.
.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;
}
Stratégies de remplacement
Pour les anciens navigateurs qui ne sont pas compatibles avec la fonction image-set(), vous DEVEZ fournir une déclaration d'image standard avant la règle image-set(). Cette stratégie d'amélioration progressive repose sur la nature en cascade du CSS : les règles non compatibles sont ignorées.
.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
);
}