Julius: Gebrauch von img, picture und srcset

Beitrag lesen

problematische Seite

Hallo Matthias,

Wie kann man hier em als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!

Die Basisgröße Pixel ist im responsiven Webdesign nicht mehr wichtig, da Bilder ja skaliert werden. Und da ist die Schriftgröße mit em einfach die bessere Einheit.

Genau das will nicht in mein Verständnis vom Sinn des Anbietens mehrerer, verschieden hoch aufgelöster Grafiken passen:
Bisher war es ja nur über Umwege möglich, verschieden hoch aufgelöste Grafiken an Clients auszuliefern, um gleichzeitig die Bandbreite zu schonen und gleichzeitig das beste Ergebnis zu erhalten. Wenn ich jetzt den Umbruchspunkt in em angebe, weiß ich ja nicht, ob 10em 400 oder 800 px entsprechen, also eine Grafik mit beispielsweise 400 oder eher 800 px Seitenlänge besser geeignet ist – wo sollte ich den Umbruchspunkt denn in em setzen, wenn ich nur weiß, dass die Grafik bei einer Breite von maximal 400 px scharf dargestellt werden? Das erschließt sich mir nicht...

##Unterschied picture und img mit srcset## Mir erschließt sich nicht ganz, wozu picture nötig ist – das einzige ist, wenn man via <source type="image\jpg" srcset"…"> verschiedene Bildformate ausliefern könnte. Wann picture und source und wann img mit srcset einsetzen?

Ich habe die Ergebnisse aus der Forumsdiskussion so formuliert: Fazit

Ok, das Tutorial habe ich noch nicht entdeckt. picture also nur bei „Art direction“ und für den Rest img.
In einer „Beachten“-Box schreibst du in der ersten Person, das ist in einem Wiki etwas unglücklich. Außerdem ist das Beispiel ohne sizes-Attribut nicht valide...

##Verhalten der Browser## Interessant finde ich auch das Verhalten der Browser mit meiner (zugegebenermaßen nicht validen) Testseite:

  • Chrome: Bei vergrößerter Breite wird die höher aufgelöste Grafik geladen, bei niedriger Breite aber nicht die niedrigere

Das ist Absicht, stell Dir mal vor du drehst dein Tablet aus Versehen zur Seite und wieder zurück und deshalb lädt er mehrere HQ-Panorama-Fotos nach.

Firefox passt aber seltsamerweise nicht in dieses Schema, das hätte ich vielleicht besser dazu schreiben sollen...

Gruß
Julius