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 passendste CSS-Bild aus einem gegebenen Satz auswählt, insbesondere 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, indem sie eine Reihe von Bildoptionen bereitstellt – jede mit einer zugehörigen Auflösungserklärung –, aus denen der Browser das geeignetste für das Gerät und die Einstellungen auswählt. Die Auflösung kann als Stellvertreter für Dateigröße verwendet werden – ein User-Agent mit einer langsamen mobilen Verbindung und einem hochauflösenden Bildschirm bevorzugt möglicherweise niedrigere Auflösungen, anstatt auf das Laden eines Bildes mit höherer Auflösung zu warten.

Mit image-set() kann der Autor Optionen bereitstellen, 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 Bildsatz. Die image-set() Funktion darf nicht in einer anderen image-set() Funktion verschachtelt werden.

<string>

Eine URL zu einem Bild.

<resolution> Optional

<resolution> Einheiten beinhalten x oder dppx für dots per pixel unit, dpi für dots per inch und dpcm für dots per centimeter. 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 vor allem für Bildschirmlesegeräte wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigt und somit seinen Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des gesamten Zwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Verwendung von image-set(), um alternative background-image Optionen bereitzustellen

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(), um alternative Bildformate bereitzustellen

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

html
<div class="box"></div>
css
.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif"
      type("image/avif"),
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
      type("image/jpeg")
  );
}

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image-set()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch