Gebrauch von img, picture und srcset

[Gunnar Bittersmann]

@@Richard Rüfenacht

Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt.

?? Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen.

Mit srcset w wird dem Browser mitgeteilt, welche Bildbreiten zum Download angeboten werden. Der Browser lädt dann das Bild mit der passenden Breite.

Das ist richtig.

Dafür verwendet der Browser das sizes-Attribut.

Auch das.

Wird im srcset w keine Wert für sizes angegeben, geht der Browser automatisch von "100vw" aus und zeigt das Bild über die gesamte Viewportbreite an. (vw = viewport width)

Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen. Die sizes-Angabe hilft dem Browser zu ermitteln, welche Version des Bildes er anfordern soll. Die Angabe hat aber ursächlich nichts damit zu tun, wie breit das Bild tatsächlich dargestellt wird.

Vergiss niemals, dass es Pixel gibt!

Sag niemals nie! Und vergiss, dass es Pixel gibt!

Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.

LLAP 🖖