Gebrauch von img, picture und srcset

[Richard Rüfenacht]

Hallo Julius

Warum muss ich … dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich?

Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt. Mit srcset w wird dem Browser mitgeteilt, welche Bildbreiten zum Download angeboten werden. Der Browser lädt dann das Bild mit der passenden Breite.

Dafür verwendet der Browser das sizes-Attribut. 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)

Im Prinzip müsste ich die Breakpoints nur auf die Anzahl der Pixel in der Breite des Bildes setzen, oder? Wie kann man hier em als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!

Vergiss niemals, dass es Pixel gibt! Die Breite von Pixelgrafiken wird in Pixeln angegeben. Dargestellt werden können sie trotzdem in em, wenn die Skalierung beachtet wird.

Für das srcset w gelten klare Regeln. Ein Beispiel:

<img src = "small.jpg" alt="…"  
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, xlarge.jpg 3200w"  
sizes="40vw">  

Es werden also Bilder mit einer Breite von 400, 800, 1600 und 3200 Pixeln angeboten und das Bild soll auf 40% der Viewportbreite angezeigt werden.

Bei einer Viewportbreite von 1200px und DPR = 1 würde medium.jpg geladen. Bei einer Viewportbreite von 768px und DPR = 2 würde large.jpg geladen.

Mit besten Grüssen
Richard