Gebrauch von img, picture und srcset

[Julius]

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? Im Prinzip müsste ich die Breakpoints nur auf die Anzahl der Pixel in der Breite des Bildes setzen, oder? Wie kann man hier em als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!

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

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

• Firefox: Bei einer Änderung der Breite des Browserfensters wird immer die „passende“ Grafik geladen.
• Chrome: Bei vergrößerter Breite wird die höher aufgelöste Grafik geladen, bei niedriger Breite aber nicht die niedrigere
• Seamonkey: Reagiert nicht auf Änderungen der Breite des Fensters
• Edge: Handhabt es genauso wie Chrome

Der IE11 kennt srcset noch nicht...

Danke & Gruß
Julius

[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

[Julius]

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

[Der Martin]

Hallo,

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

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.

<source type="image\jpg" srcset"…">

Achtung: Bitte hier keinen Backslash verwenden!

So long,
 Martin

[Julius]

Hallo Martin,

<source type="image\jpg" srcset"…">

Achtung: Bitte hier keinen Backslash verwenden!

Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)

Gruß
Julius

[Matthias Apsel]

Hallo Julius,

<source type="image\jpg" srcset"…">

Achtung: Bitte hier keinen Backslash verwenden!

Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)

Du hast Mimetypen in deinem Dateimanager?

Bis demnächst
Matthias

[Julius]

Hallo Matthias,

<source type="image\jpg" srcset"…">

Achtung: Bitte hier keinen Backslash verwenden!

Ups, die kopiere ich in der Praxis sowieso sicherheitshalber immer aus meinem Dateimanager ;-)

Du hast Mimetypen in deinem Dateimanager?

Ja:

(Nautilus unter Ubuntu 14.04)

Gruß
Julius

[Richard Rüfenacht]

Hallo Julius

Warum muss ich … dem Browser sagen, wann er welche Grafik anzeigen soll, weiß „er“ das nicht besser als ich?

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.

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)

Im Prinzip müsste ich die Breakpoints nur auf die Anzahl der Pixel in der Breite des Bildes setzen, oder? Wie kann man hier em als Einheit für den Umbruchpunkt mit den in Pixeln bemessenen Grafiken kombinieren, ist das nicht inkonsistent?!

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.

Für das srcset w gelten klare Regeln. Ein Beispiel:

<img src = "small.jpg" alt="…"  
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, xlarge.jpg 3200w"  
sizes="40vw">  

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.

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.

Mit besten Grüssen
Richard

[Gunnar Bittersmann]

@@Richard Rüfenacht

Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt.

?? Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen.

Mit srcset w wird dem Browser mitgeteilt, welche Bildbreiten zum Download angeboten werden. Der Browser lädt dann das Bild mit der passenden Breite.

Das ist richtig.

Dafür verwendet der Browser das sizes-Attribut.

Auch das.

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)

Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen. Die sizes-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 dargestellt wird.

Vergiss niemals, dass es Pixel gibt!

Sag niemals nie! Und vergiss, dass es Pixel gibt!

Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.

LLAP 🖖

[Richard Rüfenacht]

Hallo Gunnar

Der Browser berechnet aus der Viewportbreite und der Pixeldichte, wie breit er das Bild anzeigt.

?? Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen.

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.

Nein. Der Browser zeigt das Bild so breit an wie ihm per Stylesheet geheißen. Die sizes-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 dargestellt wird.

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.

Zumindest trenne dich von dem Gedanken, dass (CSS-)Pixel irgendwas mit (Geräte-)Pixel zu tun hätte.

Ein einfacher Sachverhalt kann mit diesen Begriffen kompliziert geredet werden. Es ist ausreichend die Pixeldichte zu beachten.

Mit besten Grüssen
Richard