Frage zum Wiki-Artikel „picture“, Abschnitt zu "sizes"

[Manu]

Ich verstehe den Hinweis auf ein 2−spaltiges Layout bei min-width: 25em nicht. Scheint mir irrelevant, da m.E. die sizes-Angabe auch bei jedem anderen Layout greifen sollte (bzw. nicht ein Layout vorgibt) und die Gestaltung mit CSS dem Laden der Bilddatei ohnehin nachgelagert wäre.

[Rolf B]

Hallo Manu,

ich enträtsele das so, dass die 50% Angabe dazu führen soll, dass 2 Bilder nebeneinander passen und dadurch in gewissen Anwendungsfällen eine Galerieansicht mit zwei Spalten entsteht.

Grundsätzlich finde ich diese Seite aber kaum verständlich. Ich habe mich mit picture bisher nicht beschäftigt und das Verständnis, das ich aus dieser Seite ziehe, lässt sich im Wesentlichen mit „Hä?“ zusammenfassen. Der Text lässt für den uninitiierten massenhaft Fragen offen.

Rolf

[Gunnar Bittersmann]

@@Manu

Ich verstehe den Hinweis auf ein 2−spaltiges Layout bei min-width: 25em nicht. Scheint mir irrelevant, da m.E. die sizes-Angabe auch bei jedem anderen Layout greifen sollte (bzw. nicht ein Layout vorgibt) und die Gestaltung mit CSS dem Laden der Bilddatei ohnehin nachgelagert wäre.

Ja, die tatsächliche Gestaltung ist nachgelagert. Die Entscheidung des Browsers, welche der Bildalternativen er laden soll, findet aber eher statt. Und deshalb benötigt der Browser im HTML(!) die Angabe, wie breit das Bild denn (so ungefähr) dargestellt werden wird. Genau dazu dient das sizes-Attribut.

Die Angabe in % war im Wiki falsch; ich hab das mal in vw berichtigt.

Literatur:

• MDN, Responsive images

• Kulturbanause, Responsive Images – <picture>, srcset, sizes & Co. Hier besonders interessant das Kapitel Bilder in flexiblen, mehrspaltigen Layouts

LLAP 🖖