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ählen kann, insbesondere für Bildschirme mit hoher Pixeldichte.

Die Auflösung und Bandbreite unterscheiden sich je nach Gerät und Netzwerkzugang. Die Funktion image-set() liefert die am besten geeignete Bildauflösung für das Gerät eines Benutzers. Es wird ein Satz von Bildoptionen bereitgestellt, von denen jede eine dazugehörige Auflösungsdeklaration hat, aus denen der Browser die am besten geeignete für das Gerät und die Einstellungen auswählt. Die Auflösung kann als Proxy für die Dateigröße verwendet werden — ein Benutzeragent auf einer langsamen mobilen Verbindung mit einem hochauflösenden Bildschirm könnte es vorziehen, niedrig aufgelöste Bilder zu erhalten, anstatt auf das Laden eines Bildes mit höherer Auflösung zu warten.

image-set() ermöglicht es dem Autor, Optionen bereitzustellen, anstatt festzulegen, 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 eine andere image-set() Funktion verschachtelt werden.

<string>

Eine URL zu einem Bild.

<resolution> Optional

<resolution> Einheiten umfassen x oder dppx für Punkte pro Pixeleinheit, dpi für Punkte pro Zoll und dpcm für Punkte pro Zentimeter. Jedes Bild innerhalb eines image-set() muss eine einzigartige Auflösung aufweisen.

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 Bildschirmlesegeräte wichtig, da ein Bildschirmlesegerät seine Anwesenheit nicht ankündigt und somit seinen Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des allgemeinen Zwecks der Seite 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 gewä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 AVIF- und JPEG-Formaten bereitzustellen. Wenn der Browser AVIF unterstützt, wird diese Version gewählt. 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

BCD tables only load in the browser

Siehe auch