nicht angemeldet
Wiki-Artikel: responsive Bilder
Matthias Scharwies
Wiki-Artikel: responsive Bilder
Matthias Scharwies
Servus!
Ich habe jetzt beim Artikel einen ersten Zwischenstand, aber noch viele Fragen:
Gestaltung mit sizes
sizes="(min-width: 35em) 50vw,
(min-width: 50em) 33vw,
100vw">
Ursprünglich dachte ich, dass die Größenangaben nach dem Medienmerkmal schon eine Angabe zur Darstellung bedeuten. Muss da noch etwas am Beispiel, bzw. an der Erklärung gearbeitet werden? Vorschläge sind immer willkommen!
Soll man das sizes-Attribut überhaupt verwenden? CSS-Tricks empfiehlt es i.A. wegzulassen.
Was mir besonders fehlt, sind praktische Tipps:
-
Wie viele Versionen pro Grafik?
-
Welche Größen /breakpoints sollte man verwenden?
-
weitere Anwendungsbeispiele
Und ich weiß schon, Gunnar wird wieder sagen, dass Heydon Panettiere zugänglicher ist. :-)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun - packen wir's an.
Es gibt viel zu tun - packen wir's an.
-
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-
Servus!
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.
...
Bei srcset w wird die Pixeldichte automatisch berücksichtigt, Retina-Displays entscheiden sich entsprechend für grössere Bilder.
danke, werde ich einarbeiten!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun - packen wir's an.
-