Das Bildelement

Im vorherigen Modul haben Sie erfahren, wie Sie mit dem Attribut srcset verschiedene Versionen desselben Bildes in unterschiedlichen Größen bereitstellen können. Der Browser kann dann entscheiden, welche Version verwendet werden soll. Wenn Sie das Bild komplett ändern möchten, benötigen Sie das picture Element.

So wie srcset auf dem Attribut src aufbaut, baut das Element picture auf dem Element img auf. Das Element picture umschließt ein Element img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Wenn kein Element img im Element picture verschachtelt ist, funktioniert das Element picture nicht.

Wie das srcset Attribut aktualisiert das picture Element den Wert des src Attributs im img Element. Der Unterschied besteht darin, dass das Attribut srcset dem Browser Vorschläge macht, während das Element picture Befehle erteilt. So haben Sie die Kontrolle.

source

Sie können mehrere Elemente source in einem Element picture angeben, jeweils mit einem eigenen Attribut srcset. Der Browser führt dann das erste Element aus, das er verarbeiten kann.

Bildformate

In diesem Beispiel gibt es drei verschiedene Bilder in drei verschiedenen Formaten:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

Das erste source Element verweist auf ein Bild im neuen AVIF-Format. Wenn der Browser AVIF-Bilder rendern kann, wird diese Bilddatei ausgewählt. Andernfalls wird das nächste Element source verwendet.

Das zweite source Element verweist auf ein Bild im WebP-Format. Wenn der Browser WebP-Bilder rendern kann, wird diese Bilddatei verwendet.

Andernfalls greift der Browser auf die Bilddatei im Attribut src des Elements img zurück. Dieses Bild ist ein JPEG.

So können Sie neue Bildformate verwenden, ohne die Abwärtskompatibilität zu beeinträchtigen.

In diesem Beispiel hat das Attribut type dem Browser mitgeteilt, welche Art von Bildformat angegeben wurde.

Bildgrößen

Sie können nicht nur zwischen Bildformaten, sondern auch zwischen Bildgrößen wechseln. Mit dem Attribut media teilen Sie dem Browser mit, wie breit das Bild angezeigt werden soll. Fügen Sie eine Media-Query in das Attribut media ein.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

Hier teilen Sie dem Browser mit, dass er das große Bild verwenden muss, wenn die Breite des Darstellungsbereichs größer als 75em ist. Zwischen 40em und 75em muss der Browser das mittlere Bild verwenden. Unter 40em muss der Browser das kleine Bild verwenden.

Das unterscheidet sich von der Verwendung der Attribute srcset und sizes für das Element img. In diesem Fall machen Sie dem Browser Vorschläge. Das Element source ist eher ein Befehl als ein Vorschlag.

Sie können auch den Pixeldichte-Deskriptor im Attribut srcset eines Elements source verwenden.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

In diesem Beispiel teilen Sie dem Browser weiterhin mit, was bei verschiedenen Breakpoints zu tun ist. Der Browser hat jedoch die Möglichkeit, das am besten geeignete Bild für die Pixeldichte des Geräts auszuwählen.

Wird zugeschnitten

Wenn Sie nur unterschiedlich große Versionen desselben Bildes bereitstellen müssen, ist srcset die beste Option. Wenn ein Bild bei kleineren Größen nicht gut aussieht, können Sie stattdessen eine zugeschnittene Version des Bildes erstellen.

Die verschiedenen Bilder können unterschiedliche Breiten- und Höhenverhältnisse haben, um besser zu ihrem Kontext zu passen. In einem mobilen Browser möchten Sie beispielsweise einen schmalen und hohen Zuschnitt bereitstellen, während Sie in einem Desktopbrowser einen breiten und kurzen Zuschnitt bereitstellen möchten.

Hier sehen Sie ein Beispiel für ein Hero-Image, dessen Inhalt und Form sich je nach Breite des Darstellungsbereichs ändern. Fügen Sie jedem Element source die Attribute width und height hinzu.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

Beachten Sie, dass Sie das Attribut alt nicht je nach Bildquelle ändern können. Sie müssen ein Attribut alt schreiben, das sowohl das Bild in voller Größe als auch das zugeschnittene Bild beschreibt.

In den meisten Fällen müssen Sie das Element picture für Ihre responsiven Bilder nicht verwenden. Die Attribute srcset und sizes für das Element img decken viele Anwendungsfälle ab. Wenn Sie jedoch eine genauere Steuerung benötigen, ist das Element picture ein leistungsstarkes Tool.

Es gibt eine Art von Bild, für die Sie möglicherweise keine der beiden Lösungen benötigen: Symbole. Das ist das nächste Thema.

Ihr Wissen wird getestet

Testen Sie Ihr Wissen über das Element „picture“