Gebrauch von img, picture und srcset
bearbeitet von 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 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!](https://twitter.com/brad_frost/status/271332341144764417)
Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.
LLAP 🖖
--
_“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}