Das Bildelement

Im vorherigen Modul wurde gezeigt, wie Sie mit dem Attribut srcset Versionen desselben Bildes in unterschiedlichen Größen bereitstellen können. Der Browser kann dann entscheiden, welche Version er verwendet. Wenn du das Bild komplett ändern möchtest, benötigst du das Element picture.

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

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

Wenn innerhalb des picture-Elements kein img-Element verschachtelt ist, funktioniert das picture-Element nicht.

Wie beim Attribut srcset aktualisiert auch das Element picture den Wert des Attributs src in diesem img-Element. Der Unterschied besteht darin, dass das Attribut srcset dem Browser Vorschläge liefert, während das picture-Element Befehle bereitstellt. So haben Sie die Kontrolle.

source

Du kannst in einem picture-Element mehrere source-Elemente mit jeweils einem eigenen srcset-Attribut angeben. Der Browser führt dann die erste, die er ausführen kann, aus.

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" loading="lazy" decoding="async">
</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 mit dem nächsten source-Element fortgefahren.

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 eine JPEG-Datei.

Das bedeutet, dass Sie neue Bildformate ohne Abstriche bei der Abwärtskompatibilität verwenden können.

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

Bildgrößen

Sie können nicht nur zwischen den Bildformaten, sondern auch zwischen den Bildgrößen wechseln. Mit dem Attribut media können Sie festlegen, wie breit das Bild im Browser angezeigt werden soll. Fügen Sie eine Medienabfrage innerhalb des Attributs 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" loading="lazy" decoding="async">
</picture>

Hier teilen Sie dem Browser mit, dass das große Bild verwendet werden muss, wenn die Breite des Darstellungsbereichs breiter als 75em ist. Zwischen 40em und 75em muss der Browser das mittelgroße Bild verwenden. Unter 40em muss der Browser das kleine Bild verwenden.

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

Sie können auch den Deskriptor für die Pixeldichte im Attribut srcset eines source-Elements 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" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

In diesem Beispiel teilen Sie dem Browser an verschiedenen Haltepunkten immer noch mit, was er tun soll, aber jetzt hat der Browser die Möglichkeit, das Bild auszuwählen, das für die Pixeldichte des Geräts am besten geeignet ist.

Zuschneiden

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

Die verschiedenen Bilder können je nach Kontext unterschiedliche Breiten- und Höhenverhältnisse haben. In einem mobilen Browser möchten Sie beispielsweise einen Ausschnitt mit schmalem und hoher Höhe bereitstellen, während Sie in einem Desktop-Browser einen Ausschnitt mit einem breiten und kurzen Ausschnitt präsentieren möchten.

Hier ist ein Beispiel für ein Hero-Image, bei dem der Inhalt und die Form je nach Breite des Darstellungsbereichs angepasst werden. Fügen Sie jedem source-Element 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" loading="eager" decoding="sync">
</picture>

Denken Sie daran, dass Sie das Attribut alt nicht je nach Bildquelle ändern können. Sie müssen ein alt-Attribut angeben, das sowohl das Bild in Originalgröße als auch das zugeschnittene Bild beschreibt.

Bei den meisten responsiven Bildern müssen Sie das Element picture wahrscheinlich nicht verwenden. Die Attribute srcset und sizes für das Element img decken viele Anwendungsfälle ab. Wenn du aber präzisere Einstellungen benötigst, ist das picture-Element ein leistungsstarkes Tool.

Es gibt eine Art von Bild, bei der Sie keine der beiden Lösungen benötigen: Symbole. So gehts weiter.

Wissen testen

Testen Sie Ihr Wissen über das Bildelement