sizes sagt dem Browser, wie breit ein Bild im Layout sein wird, damit er aus srcset richtig auswählen kann.
- sizes
Attribut, das angibt, wie breit ein Bild unter welchen Bedingungen dargestellt wird.
Beispiel: „Ohne sizes geht der Browser von der vollen Fensterbreite aus.“
Warum es nötig ist
Der Browser wählt die Bilddatei, bevor er das Stylesheet ausgewertet hat. Er weiß also nicht, dass das Bild nur die halbe Breite einnimmt. Ohne Angabe nimmt er die volle an und lädt eine zu große Datei.
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"Die Reihenfolge
Gelesen wird von links, die erste zutreffende Bedingung gewinnt; der letzte Wert ohne Bedingung ist der Rückfall. Die Angaben müssen zum Layout passen, sonst verschlimmert das Attribut die Lage. Bei einem Bild über die volle Breite kann es entfallen.