Richard Rüfenacht: Wiki-Artikel: responsive Bilder

Beitrag lesen

Hallo Matthias

Soll man das sizes-Attribut überhaupt verwenden?

Wird es nicht gesetzt, nehmen die Browser "100vw" an. Faule Leute lassen es deshalb gern weg. Soll sinnvoll gestaltet werden, kann nicht darauf verzichtet werden.

Das sizes-Attribut teilt dem Browser mit, wie gross das Bild im Verhältnis zur Viewportbreite dargestellt werden soll. In Kombination mit Media-Queries kann das abhängig von der Breite des Viewport erfolgen. Entsprechend kann dann die korrekte in srcset w angebotene Bildgrösse geladen werden. Ein möglicher Vorteil davon kann sein, dass beim Drehen des Smartphones die angezeigten Bilder nicht in anderer Grösse nachgeladen werden.

In srcset w könnten Bilder beispielsweise mit 400, 800, 1600 und 3200 Pixel Breite angeboten werden. Das hängt einerseits davon ab, wie gross Bilder überhaupt angezeigt oder geladen werden sollen, anderseits von der Verfügbarkeit der Bilder. Bei srcset w wird die Pixeldichte automatisch berücksichtigt, Retina-Displays entscheiden sich entsprechend für grössere Bilder.

Mit besten Grüssen
Richard