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 einer gegebenen Menge auswählen kann, hauptsächlich für Bildschirme mit hoher Pixeldichte.

Auflösung und Bandbreite variieren je nach Gerät und Netzwerkzugang. Die image-set()-Funktion liefert die am besten geeignete Bildauflösung für das Gerät eines Benutzers und bietet eine Reihe von Bildoptionen – jede mit einer zugehörigen Aufklärungsdeklaration – aus denen der Browser die passendste für das Gerät und die Einstellungen auswählt. Auflösung kann als Proxy für die Dateigröße verwendet werden – ein User-Agent mit einer langsamen mobilen Verbindung und einem hochauflösenden Bildschirm kann bevorzugen, niedrigere Auflösungen zu empfangen, anstatt auf das Laden eines höher aufgelösten Bildes zu warten.

image-set() ermöglicht es 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 jeden Bildtyp außer einem Bildsatz sein. Die image-set()-Funktion darf nicht in eine andere image-set()-Funktion verschachtelt werden.
<string>: Eine URL zu einem Bild.
<resolution> Optional: <resolution> Einheiten schließen x oder dppx für Punkte pro Pixel-Einheit ein, dpi für Punkte pro Zoll und dpcm für Punkte 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>* )

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist hauptsächlich für Screenreader wichtig, da ein Screenreader seine Präsenz nicht ankündigt und daher seinen Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die zum Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Verwendung von image-set() zur Bereitstellung alternativer Hintergrundbildoptionen

Dieses Beispiel zeigt, wie image-set() verwendet wird, 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.

html

<div class="box"></div>

css

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg")
      1x,
    url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg")
      2x
  );
}

Verwendung von image-set() zur Bereitstellung alternativer Bildformate

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.