tag:forum.selfhtml.org,2005:/selfGebrauch von img, picture und srcset – SELFHTML-Forum2016-05-03T10:33:31Zhttps://forum.selfhtml.org/self/2016/may/2/gebrauch-von-img-picture-und-srcset/1666312#m1666312Julius2016-05-01T22:57:39Z2016-05-01T22:57:39ZGebrauch 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#m1666313Matthias Scharwiesmscharwies@selfhtml.org2016-05-02T02:30:33Z2016-05-02T20:21:34ZGebrauch 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#m1666336Richard Rüfenacht2016-05-02T09:51:48Z2016-05-02T10:09:20ZGebrauch 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#m1666327Julius2016-05-02T08:31:40Z2016-05-02T08:31:40ZGebrauch 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#m1666330Der Martin2016-05-02T08:56:24Z2016-05-02T08:56:24ZGebrauch 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#m1666334Julius2016-05-02T09:26:28Z2016-05-02T09:26:28ZGebrauch 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#m1666338Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-05-02T10:07:46Z2016-05-02T10:07:46ZGebrauch 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#m1666435Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2016-05-02T20:46:59Z2016-05-02T20:49:47ZGebrauch 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#m1666343Julius2016-05-02T10:24:43Z2016-05-02T10:24:43ZGebrauch 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#m1666462Richard Rüfenacht2016-05-03T10:33:31Z2016-05-03T10:33:31ZGebrauch 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>