Gebrauch von img, picture und srcset
bearbeitet von Gunnar BittersmannServus!
> Moin!
>
> Im Moment beschäftige ich mich mit dem [Anbieten verschieden aufgelöster Grafiken](https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture) und habe ein paar Fragen dazu:
>
> ##Einsatz des `sizes`-Attributs##
> Warum muss ich (der [Validator meckert über das Weglassen des Attributs](https://validator.w3.org/nu/?doc=https%3A%2F%2Fmepnet.de%2Fsrcset%2F)) 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder#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 <code>img</code>-Element in Verbindung mit <code>srcset</code>, um mehrere optimierte Versionen anbieten zu können.*
*Für ''Art Direction'' empfiehlt sich das <code>picture</code>-Element.*
>
> ##Verhalten der Browser##
> Interessant finde ich auch das Verhalten der Browser mit meiner (zugegebenermaßen nicht validen) [Testseite](https://mepnet.de/srcset/):
>
> - **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
--
Es gibt viel zu tun - packen wir's an:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
*[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}