Das Bildelement

Im vorherigen Modul wurde gezeigt, wie Sie mit dem srcset-Attribut Versionen desselben Bildes unterschiedlicher Größe bereitstellen können. Der Browser kann dann entscheiden, welche Version er am besten verwendet. Wenn Sie das Bild vollständig ändern möchten, benötigen Sie das Element picture.

Genauso 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 das Attribut srcset aktualisiert das Element picture den Wert des Attributs src in diesem img-Element. Der Unterschied besteht darin, dass das picture-Element Befehle bereitstellt, wo dem Browser Vorschläge durch das srcset-Attribut angezeigt werden. So haben Sie die Kontrolle.

source

Du kannst innerhalb eines picture-Elements mehrere source-Elemente angeben, jedes mit einem eigenen srcset-Attribut. Der Browser führt dann die erste Version aus, die möglich ist.

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, wählt er diese Bilddatei aus. 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. Das Bild ist JPEG.

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

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

Bildgrößen

Sie können nicht nur zwischen den Bildformaten wechseln, sondern auch zwischen den Bildgrößen wechseln. Mit dem Attribut media teilen Sie dem Browser mit, wie breit das Bild 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. Im Zeitraum zwischen 40em und 75em muss der Browser das mittlere 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 dem Browser Vorschläge. Das source-Element ist eher ein Befehl als ein Vorschlag.

Sie können auch den Pixeldichtedeskriptor 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 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 ein Bild unterschiedlicher Größe ausliefern müssen, ist srcset die beste Option. Wenn ein Bild jedoch in kleineren Größen nicht gut aussieht, können Sie es stattdessen mit einer zugeschnittenen Version versehen.

Die verschiedenen Bilder können unterschiedliche Breiten- und Höhenverhältnisse haben, um besser an den Kontext anzupassen. So kann es zum Beispiel sinnvoll sein, in einem mobilen Browser ein schmales und hohes Bild zuzuschneiden, in einem Desktop-Browser dagegen eher einen breiten und kurzen Ausschnitt.

Hier ist ein Beispiel für ein Hero-Image, bei dem der Inhalt und die Form an die 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 alt-Attribut nicht je nach Bildquelle ändern können. Sie müssen ein alt-Attribut eingeben, das sowohl das Bild in Originalgröße als auch das zugeschnittene Bild beschreibt.

Für die meisten Ihrer responsiven Bilder müssen Sie das Element picture wahrscheinlich nicht verwenden. Die Attribute srcset und sizes des Elements img decken viele Anwendungsfälle ab. Aber für Situationen, in denen eine genauere Steuerung erforderlich ist, ist das picture-Element ein leistungsstarkes Tool.

Es gibt eine Art von Bild, für die Sie möglicherweise keine dieser Lösungen benötigen: Symbole. Das kommt als Nächstes.

Wissen testen

Testen Sie Ihr Wissen über das Bildelement