Was ist picture-Element?

Kurz-Fakten

• Das img-Element im Inneren ist Pflicht: es liefert das Bild aus und trägt das alt-Attribut
• Der Browser prüft die source-Angaben von oben nach unten und nimmt die erste passende
• Für reine Größenunterschiede genügt srcset am img – picture ist dafür nicht nötig
• type="image/avif" oder type="image/webp" lässt den Browser überspringen, was er nicht anzeigen kann
• width und height gehören an das img und verhindern springendes Layout

Einordnung für die Praxis

Die Abgrenzung ist der Punkt, an dem am häufigsten zu viel Aufwand entsteht: Wer nur dasselbe Motiv in verschiedenen Größen ausliefern will, braucht kein picture. Dafür genügt srcset mit sizes – der Browser entscheidet dann selbst, und zwar besser, weil er Bildschirmdichte und eingestellte Zoomstufe kennt.

picture lohnt, wenn sich das Bild inhaltlich ändern soll: querformatige Szene auf dem Bildschirm, enger Ausschnitt auf dem Telefon.

Verwandte Begriffe

• Multimedia-Elemente Als Multimedia-Elemente werden die Elemente bezeichnet, mit denen sich Bild, Ton und…
• Responsive HTML Responsives Verhalten entsteht überwiegend in CSS – HTML steuert zwei Dinge bei: die…
• alt-Attribut Das alt-Attribut enthält den Alternativtext eines Bildes: die Beschreibung, die an die…
• SVG einbinden SVG ist ein Format für Vektorgrafiken, das sich verlustfrei skalieren lässt. Es kann als…