HTML-Kurs / Responsive Bilder: srcset, sizes und picture

Responsive Bilder bieten dem Browser Dateien mit unterschiedlichen Auflösungen oder Kompositionen, damit er ein für die Anzeige geeignetes Bild auswählen kann. Verwenden Sie srcset und sizes für die Auflösungswahl desselben Bildes, und picture, wenn ein schmalerer Bildschirm einen anderen Bildausschnitt erfordert.

Holen Sie sich die Beispielbilddateien

Diese Beispiele verwenden dasselbe Bild des Sees in drei Breiten und einen quadratischen Zuschnitt, der den Baum hervorhebt. Laden Sie die Dateien herunter und speichern Sie sie im selben Ordner wie Ihre HTML-Datei, um die unveränderten relativen URLs zu testen. Bereiten Sie die Datei, den alternativen Text und die Abmessungen unter Verwendung der Prinzipien in Bilder: img, alternativer Text und Abmessungen vor.

• Bild mit 480 Pixel Breite
• Bild mit 960 Pixel Breite
• Bild mit 1600 Pixel Breite
• Quadratischer Zuschnitt von 800×800 Pixel

Die ersten drei bewahren die Szene und das Seitenverhältnis. Die quadratische Datei hat eine andere Komposition für eine schmale Anzeige.

Die Bildauflösung mit srcset und sizes auswählen

Die Deskriptoren 480w, 960w und 1600w in srcset geben die tatsächliche Breite jeder Datei in Pixel an. sizes beschreibt die erwartete Gestaltungsbreite des Bildes unter verschiedenen Fensterbedingungen.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Ein Baum auf einer Insel inmitten eines Sees, mit Bergen im Hintergrund"
  width="1600" height="900">

Dies setzt voraus, dass das Bild ungefähr die gleiche Breite wie das Anzeigefenster bis zu 800 CSS-Pixeln hat und dass es 800 CSS-Pixel nicht überschreitet. Wenn Ihr Layout anders ist, ändern Sie sizes, damit es passt. src bietet eine Fallback-Lösung für Umgebungen ohne Unterstützung von srcset.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

Dieses CSS gilt nur für das erste Beispiel, das die Klasse example-fluid hat. Der Browser kann auch die Pixeldichte des Geräts und den Zoom berücksichtigen. Ein schmales Viewport gewährleistet daher nicht, dass die 480-Pixel-Datei ausgewählt wird. sizes beschreibt die angezeigten CSS-Pixel und nicht die Breite der heruntergeladenen Datei.

Verwenden Sie Dichte-Deskriptoren für eine feste Anzeigebreite

Wenn ein Bild immer mit einer CSS-Breite von 480 Pixel angezeigt wird, können Sie 1x- und 2x-Kandidaten vorschlagen. Verwenden Sie sizes nicht mit dieser Form.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="Ein Baum auf einer Insel inmitten eines Sees, mit Bergen im Hintergrund"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

Das CSS des ersten Beispiels gilt nicht für dieses Bild. Dieses CSS fixiert die angezeigte Breite auf 480 Pixel, sodass das Bild über einen schmaleren Container hinausgehen kann. Wenn sich die Anzeige-Breite je nach Layout ändern soll, verwenden Sie den zuvor erwähnten Ansatz mit w und sizes. Mischen Sie nicht die Deskriptoren w und x in einem einzigen srcset.

Das Zuschneiden mit picture ändern

picture kann eine andere Komposition anbieten, anstatt nur eine andere Auflösung. Dieses Beispiel verwendet das quadratische Zuschneiden für Fensterbreiten bis 600 Pixel und ein Querformatbild sonst.

<picture class="example-picture">
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Ein Baum auf einer Insel inmitten eines Sees, mit Bergen im Hintergrund"
       width="960" height="540">
</picture>

Die Auswahl eines Zuschnitts und die Anpassung seiner Anzeigebreite sind voneinander verschiedene Aktionen. Fügen Sie dieses CSS in das Style-Element des Kopfbereichs oder in das verknüpfte Stylesheet ein, damit sich das Picture-Bild an ein schmales übergeordnetes Element anpasst und dabei sein Verhältnis beibehält.

.example-picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

Das obige Foto zeigt die auf schmalen Bildschirmen verwendete quadratische Datei; dieses Foto im Artikel selbst ändert sich nicht in Abhängigkeit von der Fensterbreite. picture erfordert immer ein img-Element mit einem Ersatzinhalt und alt. Jedes source liefert eine Bedingung und eine Kandidatendatei; der Alternativtext des Bildes gehört zu img.

Überprüfen Sie, welches Bild der Browser ausgewählt hat

Speichern Sie die vier Bilddateien, wobei Sie ihre Dateinamen beibehalten, neben index.html. Legen Sie ein HTML-Beispiel innerhalb von body und dessen CSS innerhalb eines Elements style in head oder in einem separaten Stylesheet. Um im Hinblick auf die tatsächliche Fensterbreite auf Mobilgeräten zu testen, fügen Sie <meta name="viewport" content="width=device-width, initial-scale=1"> zu head hinzu.

1. Öffnen Sie index.html in einem Browser und öffnen Sie das Netzwerk-Panel der Entwicklertools.
2. Ändern Sie die Breite des Ansichtsfensters, deaktivieren Sie den Cache und laden Sie die Seite neu. Überprüfen Sie die Dateinamen der Bildanfragen, um zu sehen, welche Kandidaten geladen wurden.
3. Für das Beispiel picture laden Sie einmal bei einer Browserfensterbreite von 600 Pixel oder weniger und einmal bei mehr als 600 Pixel neu. Überprüfen Sie das quadratische Zuschneiden bei der schmalsten Breite und die Querformatdatei bei der breitesten Breite.

Sie können diese Werte auch in der Konsole überprüfen. currentSrc zeigt die URL des aktuell vom Browser ausgewählten Bildes. Der erste Befehl richtet sich auf das Beispiel srcset; der zweite Befehl richtet sich auf das Beispiel picture.

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

Selbst bei gleicher Fensterbreite können Pixeldichte und Zoom bestimmen, welche Datei srcset ausgewählt wird. Wenn eine größere Datei bereits geladen ist, wird sie durch Verkleinern des Fensters nicht sofort durch eine kleinere Datei ersetzt. Ändern Sie die Bedingungen, deaktivieren Sie den Cache und laden Sie neu, bevor Sie vergleichen.

Überprüfen Sie die Änderung der Auflösung und die Anpassung des Bildausschnitts

Das Anzeigefenster ist der Bereich des Browsers, der zum Anordnen der Seite verwendet wird. Die Pixeldichte des Geräts verbindet CSS-Pixel mit physischen Pixeln des Bildschirms. Dichte, Zoom und Cache-Status können die Auswahl der Auflösung sogar bei gleicher Fensterbreite beeinflussen, daher sollten Sie keinen festen Dateinamen für srcset versprechen. Testen Sie die Media-Bedingung für den Bildausschnitt separat von der Auflösungsänderung.

Wenn das falsche Bild ausgewählt wird

• Überprüfen Sie, dass jeder w-Bezeichner der tatsächlichen Breite der Datei in Pixeln entspricht.
• Vergleichen Sie sizes mit der CSS-Breite bei jeder Fenstergröße.
• Verwenden Sie für die Auflösungsänderung und getrennte Zuschnitte identische Kompositionsdateien mit picture.
• Behalten Sie ein bedeutungsvolles alt auf dem img innerhalb von picture.

Für detaillierte Auswahlregeln siehe den Leitfaden für responsive Bilder MDN und die Spezifikation für HTML-Bilder WHATWG.