image-set()

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die image-set() CSS funktionale Notation ist eine Methode, mit der der Browser das am besten geeignete CSS-Bild aus einem gegebenen Satz auswählt, hauptsächlich für Bildschirme mit hoher Pixeldichte.

Auflösung und Bandbreite unterscheiden sich je nach Gerät und Netzwerkanbindung. Die image-set()-Funktion liefert die am besten geeignete Bildauflösung für das Gerät eines Benutzers, indem ein Satz von Bildoptionen bereitgestellt wird – jede mit einer zugehörigen Auflösungsangabe –, aus denen der Browser die am besten geeignete für das Gerät und die Einstellungen auswählt. Auflösung kann als Stellvertreter für Dateigröße verwendet werden – ein User-Agent mit langsamer mobiler Verbindung und hochauflösendem Bildschirm könnte bevorzugen, niedrigauflösende Bilder zu erhalten, anstatt auf das Laden eines hochauflösenden Bildes zu warten.

image-set() erlaubt dem Autor, Optionen bereitzustellen, anstatt zu bestimmen, was jeder einzelne Benutzer benötigt.

Syntax

css
/* Select image based on resolution */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Select gradient based on resolution */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Select image based on supported formats */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

Werte

<image>

Das <image> kann jeder Bildtyp sein, außer einem Bildersatz. Die image-set()-Funktion darf nicht innerhalb einer anderen image-set()-Funktion verschachtelt werden.

<string>

Eine URL zu einem Bild.

<resolution> Optional

<resolution> Einheiten enthalten x oder dppx für Punkt pro Pixel Einheit, dpi für Punkt pro Inch und dpcm für Punkt pro Zentimeter. Jedes Bild innerhalb eines image-set() muss eine eindeutige Auflösung haben.

type(<string>) Optional

Ein gültiger MIME-Typ-String, zum Beispiel "image/jpeg".

Formale Syntax

<image-set()> = 
  image-set( <image-set-option># )  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Zugänglichkeit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für assistive Technologien. Dies ist hauptsächlich für Bildschirmleser von Bedeutung, da ein Bildschirmleser dessen Anwesenheit nicht ankündigt und somit den Benutzern nichts mitteilt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Mit image-set() alternative Optionen für Hintergrundbilder bereitstellen

Dieses Beispiel zeigt, wie man image-set() verwendet, um zwei alternative background-image-Optionen bereitzustellen, die je nach benötigter Auflösung ausgewählt werden: eine normale Version und eine hochauflösende Version.

Hinweis: Im obigen Beispiel wird die -webkit-präfixierte Version ebenfalls verwendet, um Chrome und Safari zu unterstützen. In Firefox 90 wurde Unterstützung für -webkit-image-set() als Alias für image-set() hinzugefügt (um Kompatibilität zu bieten, wo Entwickler die standardisierte Eigenschaft nicht hinzugefügt haben).

Mit image-set() alternative Bildformate bereitstellen

Im nächsten Beispiel wird die type()-Funktion verwendet, um das Bild in den Formaten AVIF und JPEG bereitzustellen. Wenn der Browser AVIF unterstützt, wählt er diese Version. Andernfalls verwendet er die JPEG-Version.

Bereitstellung eines Fallbacks

Für image-set() gibt es kein integriertes Fallback; daher ist eine separate Deklaration erforderlich, um eine background-image für jene Browser bereitzustellen, die die Funktion nicht unterstützen, bevor die Zeile mit image-set() verwendet wird.

css
.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

Spezifikationen

Specification
CSS Images Module Level 4
# image-set-notation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch