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
Während das srcset
-Attribut dem Browser ________ zuweist, gibt das <picture>
-Element ________ an.
Zu den Funktionen des <picture>
-Elements gehören:
avif
- oder webp
-Dateien herunterladen