Das picture-Element erlaubt es, je nach Bedingung verschiedene Bilddateien auszuliefern, etwa ein anderes Format oder einen anderen Ausschnitt.
- picture-Element
Element, das mehrere Bildquellen mit Bedingungen umschließt, aus denen der Browser eine auswählt.
Beispiel: „Ein picture-Element enthält immer ein img-Element als Rückfallebene.“
Die beiden Anwendungsfälle
<picture>
<source srcset="/bild.avif" type="image/avif">
<source srcset="/bild.webp" type="image/webp">
<img src="/bild.jpg" alt="…" width="1200" height="800">
</picture>Erstens moderne Formate mit Rückfall auf ein bekanntes. Zweitens ein anderer Ausschnitt auf schmalen Bildschirmen, wo ein breites Motiv sonst unkenntlich wird. Für bloß verschiedene Größen desselben Bildes genügt srcset am img.
Das img bleibt Pflicht
Es trägt den Alternativtext und die Maße und ist das, was angezeigt wird. Die source-Elemente sind nur Vorschläge; kennt der Browser kein Format davon, nimmt er das img.