tag:forum.selfhtml.org,2005:/self Gebrauch von img, picture und srcset – SELFHTML-Forum 2016-05-03T10:33:31Z https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666312#m1666312 Julius 2016-05-01T22:57:39Z 2016-05-01T22:57:39Z Gebrauch von img, picture und srcset <p>Moin!</p> <p>Im Moment beschäftige ich mich mit dem <a href="https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture" rel="nofollow noopener noreferrer">Anbieten verschieden aufgelöster Grafiken</a> und habe ein paar Fragen dazu:</p> <p>##Einsatz des <code>sizes</code>-Attributs## Warum muss ich (der <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fmepnet.de%2Fsrcset%2F" rel="nofollow noopener noreferrer">Validator meckert über das Weglassen des Attributs</a>) dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich? Im Prinzip müsste ich die Breakpoints nur auf die Anzahl der Pixel in der Breite des Bildes setzen, oder? Wie kann man hier <code>em</code> als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!</p> <p>##Unterschied <code>picture</code> und <code>img</code> mit <code>srcset</code>## Mir erschließt sich nicht ganz, wozu <code>picture</code> nötig ist – das einzige ist, wenn man via <code><source type="image\jpg" srcset"…"></code> verschiedene Bildformate ausliefern könnte. Wann <code>picture</code> und <code>source</code> und wann <code>img</code> mit <code>srcset</code> einsetzen?</p> <p>##Verhalten der Browser## Interessant finde ich auch das Verhalten der Browser mit meiner (zugegebenermaßen nicht validen) <a href="https://mepnet.de/srcset/" rel="nofollow noopener noreferrer">Testseite</a>:</p> <ul> <li><strong>Firefox</strong>: Bei einer Änderung der Breite des Browserfensters wird immer die „passende“ Grafik geladen.</li> <li><strong>Chrome</strong>: Bei vergrößerter Breite wird die höher aufgelöste Grafik geladen, bei niedriger Breite aber nicht die niedrigere</li> <li><strong>Seamonkey</strong>: Reagiert nicht auf Änderungen der Breite des Fensters</li> <li><strong>Edge</strong>: Handhabt es genauso wie Chrome</li> </ul> <p>Der IE11 kennt <code>srcset</code> noch nicht...</p> <p>Danke & Gruß<br> Julius</p> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666313#m1666313 Matthias Scharwies mscharwies@selfhtml.org 2016-05-02T02:30:33Z 2016-05-02T20:21:34Z Gebrauch von img, picture und srcset <p>Servus!</p> <blockquote> <p>Moin!</p> <p>Im Moment beschäftige ich mich mit dem <a href="https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture" rel="nofollow noopener noreferrer">Anbieten verschieden aufgelöster Grafiken</a> und habe ein paar Fragen dazu:</p> <p>##Einsatz des <code>sizes</code>-Attributs## Warum muss ich (der <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fmepnet.de%2Fsrcset%2F" rel="nofollow noopener noreferrer">Validator meckert über das Weglassen des Attributs</a>) dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich?</p> </blockquote> <p>Imho ist sizes ein Vorschlag an den Browser - er entscheidet dann.</p> <blockquote> <p>Wie kann man hier <code>em</code> als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!</p> </blockquote> <p>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.</p> <blockquote> <p>##Unterschied <code>picture</code> und <code>img</code> mit <code>srcset</code>## Mir erschließt sich nicht ganz, wozu <code>picture</code> nötig ist – das einzige ist, wenn man via <code><source type="image\jpg" srcset"…"></code> verschiedene Bildformate ausliefern könnte. Wann <code>picture</code> und <code>source</code> und wann <code>img</code> mit <code>srcset</code> einsetzen?</p> </blockquote> <p>Ich habe die Ergebnisse aus der Forumsdiskussion so formuliert: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder#Fazit" rel="nofollow noopener noreferrer">Fazit</a></p> <p><em>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.</em></p> <p><em>Für ''Art Direction'' empfiehlt sich das <code>picture</code>-Element.</em></p> <blockquote> <p>##Verhalten der Browser## Interessant finde ich auch das Verhalten der Browser mit meiner (zugegebenermaßen nicht validen) <a href="https://mepnet.de/srcset/" rel="nofollow noopener noreferrer">Testseite</a>:</p> <ul> <li><strong>Chrome</strong>: Bei vergrößerter Breite wird die höher aufgelöste Grafik geladen, bei niedriger Breite aber nicht die niedrigere</li> </ul> </blockquote> <p>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.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun - packen wir's an: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> <em><a href="http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten" rel="nofollow noopener noreferrer">gewünschte Seiten</a></em> </div> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666336#m1666336 Richard Rüfenacht 2016-05-02T09:51:48Z 2016-05-02T10:09:20Z Gebrauch von img, picture und srcset <p>Hallo Julius</p> <blockquote> <p>Warum muss ich … dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich?</p> </blockquote> <p>Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt. Mit srcset w wird dem Browser mitgeteilt, welche Bildbreiten zum Download angeboten werden. Der Browser lädt dann das Bild mit der passenden Breite.</p> <p>Dafür verwendet der Browser das sizes-Attribut. Wird im srcset w keine Wert für sizes angegeben, geht der Browser automatisch von "100vw" aus und zeigt das Bild über die gesamte Viewportbreite an. (vw = viewport width)</p> <blockquote> <p>Im Prinzip müsste ich die Breakpoints nur auf die Anzahl der Pixel in der Breite des Bildes setzen, oder? Wie kann man hier <code>em</code> als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!</p> </blockquote> <p>Vergiss niemals, dass es Pixel gibt! Die Breite von Pixelgrafiken wird in Pixeln angegeben. Dargestellt werden können sie trotzdem in em, wenn die Skalierung beachtet wird.</p> <p>Für das srcset w gelten klare Regeln. Ein Beispiel:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>small.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small.jpg 400w, medium.jpg 800w, large.jpg 1600w, xlarge.jpg 3200w<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40vw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Es werden also Bilder mit einer Breite von 400, 800, 1600 und 3200 Pixeln angeboten und das Bild soll auf 40% der Viewportbreite angezeigt werden.</p> <p>Bei einer Viewportbreite von 1200px und DPR = 1 würde medium.jpg geladen. Bei einer Viewportbreite von 768px und DPR = 2 würde large.jpg geladen.</p> <p>Mit besten Grüssen<br> Richard</p> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666327#m1666327 Julius 2016-05-02T08:31:40Z 2016-05-02T08:31:40Z Gebrauch von img, picture und srcset <p>Hallo Matthias,</p> <blockquote> <blockquote> <p>Wie kann man hier <code>em</code> als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!</p> </blockquote> <p>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.</p> </blockquote> <p>Genau das will nicht in mein Verständnis vom Sinn des Anbietens mehrerer, verschieden hoch aufgelöster Grafiken passen:<br> 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 <code>em</code> 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 <code>em</code> setzen, wenn ich nur weiß, dass die Grafik bei einer Breite von maximal 400 px scharf dargestellt werden? Das erschließt sich mir nicht...</p> <blockquote> <blockquote> <p>##Unterschied <code>picture</code> und <code>img</code> mit <code>srcset</code>## Mir erschließt sich nicht ganz, wozu <code>picture</code> nötig ist – das einzige ist, wenn man via <code><source type="image\jpg" srcset"…"></code> verschiedene Bildformate ausliefern könnte. Wann <code>picture</code> und <code>source</code> und wann <code>img</code> mit <code>srcset</code> einsetzen?</p> </blockquote> <p>Ich habe die Ergebnisse aus der Forumsdiskussion so formuliert: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder#Fazit" rel="nofollow noopener noreferrer">Fazit</a></p> </blockquote> <p>Ok, das Tutorial habe ich noch nicht entdeckt. <code>picture</code> also nur bei „Art direction“ und für den Rest <code>img</code>.<br> In einer <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder#Gestaltung_mit_sizes" rel="nofollow noopener noreferrer">„Beachten“-Box</a> schreibst du in der ersten Person, das ist in einem Wiki etwas unglücklich. Außerdem ist das Beispiel ohne <code>sizes</code>-Attribut nicht valide...</p> <blockquote> <blockquote> <p>##Verhalten der Browser## Interessant finde ich auch das Verhalten der Browser mit meiner (zugegebenermaßen nicht validen) <a href="https://mepnet.de/srcset/" rel="nofollow noopener noreferrer">Testseite</a>:</p> <ul> <li><strong>Chrome</strong>: Bei vergrößerter Breite wird die höher aufgelöste Grafik geladen, bei niedriger Breite aber nicht die niedrigere</li> </ul> </blockquote> <p>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.</p> </blockquote> <p>Firefox passt aber seltsamerweise nicht in dieses Schema, das hätte ich vielleicht besser dazu schreiben sollen...</p> <p>Gruß<br> Julius</p> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666330#m1666330 Der Martin 2016-05-02T08:56:24Z 2016-05-02T08:56:24Z Gebrauch von img, picture und srcset <p>Hallo,</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <p>Genau das will nicht in mein Verständnis vom Sinn des Anbietens mehrerer, verschieden hoch aufgelöster Grafiken passen:<br> 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 <code>em</code> 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 <code>em</code> setzen, wenn ich nur weiß, dass die Grafik bei einer Breite von maximal 400 px scharf dargestellt werden? Das erschließt sich mir nicht...</p> </blockquote> <p>ja, ich kann deine Ratlosigkeit in diesem Punkt nachvollziehen. Tatsächlich würde ich das oben aufgestellte Dogma aufweichen: Pixel sind als Maßeinheit durchaus sinnvoll, wenn ich mich auf etwas beziehe, was nun mal von Haus aus Pixel-basiert vorliegt, etwa sämtliche Rastergrafiken.</p> <blockquote> <blockquote> <blockquote> <p><code><source type="image\jpg" srcset"…"></code></p> </blockquote> </blockquote> </blockquote> <p>Achtung: Bitte hier keinen Backslash verwenden!</p> <p>So long,<br>  Martin</p> <div class="signature">-- <br> Logik ist die Theorie, Chaos die Praxis. </div> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666334#m1666334 Julius 2016-05-02T09:26:28Z 2016-05-02T09:26:28Z Gebrauch von img, picture und srcset <p>Hallo Martin,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p><code><source type="image\jpg" srcset"…"></code></p> </blockquote> </blockquote> </blockquote> <p>Achtung: Bitte hier keinen Backslash verwenden!</p> </blockquote> <p>Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)</p> <p>Gruß<br> Julius</p> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666338#m1666338 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-05-02T10:07:46Z 2016-05-02T10:07:46Z Gebrauch von img, picture und srcset <p>Hallo Julius,</p> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <p><code><source type="image\jpg" srcset"…"></code></p> </blockquote> </blockquote> </blockquote> <p>Achtung: Bitte hier keinen Backslash verwenden!</p> </blockquote> <p>Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)</p> </blockquote> <p>Du hast Mimetypen in deinem Dateimanager?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) </div> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666435#m1666435 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-05-02T20:46:59Z 2016-05-02T20:49:47Z Gebrauch von img, picture und srcset <p>@@Richard Rüfenacht</p> <blockquote> <p>Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt.</p> </blockquote> <p>?? Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen.</p> <blockquote> <p>Mit srcset w wird dem Browser mitgeteilt, welche Bildbreiten zum Download angeboten werden. Der Browser lädt dann das Bild mit der passenden Breite.</p> </blockquote> <p>Das ist richtig.</p> <blockquote> <p>Dafür verwendet der Browser das sizes-Attribut.</p> </blockquote> <p>Auch das.</p> <blockquote> <p>Wird im srcset w keine Wert für sizes angegeben, geht der Browser automatisch von "100vw" aus und zeigt das Bild über die gesamte Viewportbreite an. (vw = viewport width)</p> </blockquote> <p>Nein. Der Browser zeigt das Bild so breit an wie ihm <strong>per Stylesheet</strong> geheißen. Die <code>sizes</code>-Angabe hilft dem Browser zu ermitteln, welche Version des Bildes er anfordern soll. Die Angabe hat aber ursächlich nichts damit zu tun, wie breit das Bild tatsächlich <strong>dargestellt</strong> wird.</p> <blockquote> <p>Vergiss niemals, dass es Pixel gibt!</p> </blockquote> <p>Sag niemals nie! Und <a href="https://twitter.com/brad_frost/status/271332341144764417" rel="nofollow noopener noreferrer">vergiss, dass es Pixel gibt!</a></p> <p>Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.</p> <p>LLAP </p> <div class="signature">-- <br> <em>“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”</em> —Stefan Tilkov<br> <em><a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: <code>sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|</code></em> </div> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666343#m1666343 Julius 2016-05-02T10:24:43Z 2016-05-02T10:24:43Z Gebrauch von img, picture und srcset <p>Hallo Matthias,</p> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <p><code><source type="image\jpg" srcset"…"></code></p> </blockquote> </blockquote> </blockquote> <p>Achtung: Bitte hier keinen Backslash verwenden!</p> </blockquote> <p>Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)</p> </blockquote> <p>Du hast Mimetypen in deinem Dateimanager?</p> </blockquote> <p>Ja:<br> <img src="/images/7058b7cb-d59b-4e68-847c-23fc8d51896d.png" alt="JPEG Image (image/jpeg)" loading="lazy"><br> (Nautilus unter Ubuntu 14.04)</p> <p>Gruß<br> Julius</p> https://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666462#m1666462 Richard Rüfenacht 2016-05-03T10:33:31Z 2016-05-03T10:33:31Z Gebrauch von img, picture und srcset <p>Hallo Gunnar</p> <blockquote> <blockquote> <p>Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt.</p> </blockquote> <p>?? Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen.</p> </blockquote> <p>Zu diesem Zeitpunkt ist das Bild noch gar nicht geladen, kann also auch nicht angezeigt werden. Der Browser berechnet aber schon, wie er es darstellen wird.</p> <blockquote> <p>Nein. Der Browser zeigt das Bild so breit an wie ihm <strong>per Stylesheet</strong> geheißen. Die <code>sizes</code>-Angabe hilft dem Browser zu ermitteln, welche Version des Bildes er anfordern soll. Die Angabe hat aber ursächlich nichts damit zu tun, wie breit das Bild tatsächlich <strong>dargestellt</strong> wird.</p> </blockquote> <p>Es geht hier nicht um CSS, sondern um srcset w und sizes. Wer sich aus gutem Grunde für dieser Weg entscheidet, wird img sicher nicht mit CSS stylen. sizes dient sowohl zur Berechnung und Auswahl der erforderlichen Bildbreite als auch zur Darstellung.</p> <blockquote> <p>Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.</p> </blockquote> <p>Ein einfacher Sachverhalt kann mit diesen Begriffen kompliziert geredet werden. Es ist ausreichend die Pixeldichte zu beachten.</p> <p>Mit besten Grüssen<br> Richard</p>