CSS/Funktionen/image-set()

Die image-set()-Funktion ist eine Methode, mit der der Browser das am besten geeignete CSS-Bild aus einem gegebenen Satz auswählen kann, hauptsächlich für Bildschirme mit hoher Pixeldichte. Damit ist es ein Pendant zum srcset-Attribut für img und picture.

Sie stellt eine Reihe von Bildoptionen - jeweils mit einer zugehörigen Auflösungsangabe - bereit, aus denen der Browser die für das Gerät und die Einstellungen am besten geeignete auswählt. Die Auflösung kann als Proxy für die Dateigröße verwendet werden - ein User-Agent auf einer langsamen mobilen Verbindung mit einem hochauflösenden Bildschirm zieht es möglicherweise vor, Bilder mit geringerer Auflösung zu erhalten, anstatt auf das Laden eines Bildes mit höherer Auflösung zu warten..

Parameter	url() der Ressource. x oder dppx (dots per pixel) für die Auflösung (optional) type(<string>), der Typ z. B. "image/jpeg"
anwendbar auf	* background background-image content cursor
Browsersupport	caniuse: {{{caniuse}}}

Beispiel

.box {
  background-image: url("large-balloons.jpg");  /* Fallback */
  background-image: -webkit-image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

Als Fallback wird background-image ein „klassischer“ Wert zugewiesen.

Ein zweiter Regelsatz enthält jeweils …

• drei url()-Funktionen für Hintergrundbilder,
• die als zweiten Parameter einen x-Wert für die Auflösung erhalten.

Weblinks

• CSSWG: imageset() CSS Images Module Level 4
• MDN: image-set()
• css-tricks: Using Performant Next-Gen Images in CSS with image-set Otto Williams, 23.06.2021

Siehe auch

• CSS/Tutorials/Hintergrund/Hero-Images