Gebrauch von img, picture und srcset

[Matthias Scharwies]

Servus!

Moin!

Im Moment beschäftige ich mich mit dem Anbieten verschieden aufgelöster Grafiken und habe ein paar Fragen dazu:

##Einsatz des sizes-Attributs## Warum muss ich (der Validator meckert über das Weglassen des Attributs) dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich?

Imho ist sizes ein Vorschlag an den Browser - er entscheidet dann.

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.

##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

Bei normalen Bildern werden sich mehrere Versionen einer Grafik nicht lohnen, bei großflächigen Panorama- und Hero-Bildern dagegen schon. Hierfür eignet sich das img-Element in Verbindung mit srcset, um mehrere optimierte Versionen anbieten zu können.

Für ''Art Direction'' empfiehlt sich das picture-Element.

##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.

Herzliche Grüße

Matthias Scharwies