Wenn Sie optimierte dekorative Bilder über CSS bereitstellen, wird die wahrgenommene Leistung verbessert, ohne dass die visuelle Qualität beeinträchtigt wird. Mit der CSS-Funktion image-set() können Sie dem Browser mehrere Optionen für ein einzelnes Hintergrund- oder Maskenbild zur Verfügung stellen. Sie können moderne Formate (wie AVIF oder WebP) zusammen mit verschiedenen Auflösungen (wie 1x und 2x) angeben. Der Browser wählt dann dynamisch das kleinste kompatible Bild aus, das die entsprechende Pixeldichte für das Gerät des Nutzers bietet.
ACHTUNG: Wenn das Bild wahrscheinlich das LCP-Element (Largest Contentful Paint) ist (z.B. ein großes Hero-Banner), beachten Sie, dass Bilder, die in CSS über image-set() referenziert werden, vom Preload-Scanner des Browsers nicht gefunden werden können. Dies kann das Laden von Bildern erheblich verzögern und den LCP beeinträchtigen. Für LCP-Kandidaten sollten Sie stattdessen ein Standard-HTML-<img>- oder <picture>-Tag verwenden oder alternativ das Bild mit der Option <link rel=preload> mit einem media-Attribut vorab laden.
Implementierung
Die Funktion image-set() wird überall dort verwendet, wo CSS einen <image>-Wert erwartet, am häufigsten in background-image, content oder mask-image. Die besten Ergebnisse erzielen Sie, wenn Sie sowohl das Bildformat über type() als auch die Auflösung (z. B. 1x oder 2x) angeben. Beide Argumente sind jedoch optional.
.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;
}
Fallback-Strategien
Für ältere Browser, die die Funktion image-set() nicht unterstützen, MÜSSEN Sie vor der Regel image-set() eine Standardbilddeklaration angeben. Diese Strategie der progressiven Verbesserung beruht auf der kaskadierenden Natur von CSS: Nicht unterstützte Regeln werden ignoriert.
.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
);
}