Immernoch scrset und sizes

[heinetz]

Hallo Forum,

mir fehlt immernoch der sichere Umgang mit den Attributen srcset und sizes im img-Tag. Könnte Ihr mir helfen? Unter welchen Umständen liefert der Browser welches Bild aus wenn er über das img-Tag folgende Anweisung bekommt:

<img 
 src="hand.jpg" 
 srcset="
  hand_0bbe9f3457.jpg 330w,
  hand_b7e1f09de8.jpg 660w,
  hand_99b3ed424a.jpg 900w,
  hand.jpg 3000w
 " 
 sizes="
  (min-width: 1440px) 330px,
  (min-width: 1024px) 25vw,
  (min-width: 460px) 50vw,
  (min-width: 510px) 460px,
  95vw
 " 
 alt="Alt" 
 title="Title"

>

Ich versuche eine Interpretation und würde mich freuen, wenn Ihr mich berichtigt.

1. Die im Attribut "src" definierte Grafik wird geladen, wenn der Browser kein scrset-Attribut unterstützt.

2. Im Attribut srcset steht eine Liste von Bildern sowie deren reale Breite in px. Die Breite ist als Hinweis für den Browser zu verstehen. Das zweite Bild in der Liste ist bspw. 660px breit. (Nach welchen Kriterien würde der Browser dieses Bild wählen?)

3. Im Attribut sizes steht, in welcher Grösse das Bild bei welcher Viewport-Breite dargestellt werden soll.

danke für Klärung

gruss, heinetz

[djr]

Hallo @heinetz,

soweit verstehst Du es richtig.

Zu

Unter welchen Umständen liefert der Browser welches Bild aus

bzw.

Das zweite Bild in der Liste ist bspw. 660px breit. (Nach welchen Kriterien würde der Browser dieses Bild wählen?)

Stell Dir den Vorgang so vor:

Aufgrund von sizes reserviert der Browser einen in seiner Breite nun festgelegten Bereich. Anschließend entscheidet er auf Basis der w-Angabe in srcset welche Grafik sich am Besten in diesem Breich darstellen ließe. Diese Grafik läd er und fügt sie in den reservierten Bereich ein.

Folglich hat man keinen direkten Einfluss darauf, wann welche Grafik geladen wird. Es ist die Entscheidung des Browsers.

[heinetz]

Danke für Deine gute Erklärung. Ich versuche mich mit einer Gegenprobe:

1. Der Browser liesst zuerst das Attribut sizes und wertet die Bedingungen aus. Bei einer Viewportbreite von 1025px würde die 2. Bedingung zutreffen und der Browser daraufhin davon ausgehen, dass das Bild in einer Breite von 25vw, also 256.25px dargestellt werden soll.

2. Nun sucht der Browser sich das nächstbreitere Bild aus dem srcset aus. Dabei ist die Angabe von w massgeblich. In diesem Fall also 330w. Bei einer Pixeldichte von 2 (Retina) würde ein Biöd gewählt werden, dass mindestens 512,5px breit ist. Ist bereits ein grösseres Bild im Cache, wird das verwendet.

richtig?

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

mir fehlt immernoch der sichere Umgang mit den Attributen srcset und sizes im img-Tag. Könnte Ihr mir helfen?

Mein geschätzter Kollege empfielt folgende Lektüre:

• kulturbanause Blog: Responsive Images – <picture>, srcset, sizes & Co.

• MDN: Responsive images

LLAP 🖖

[heinetz]

Ja, den Beitrag kenne ich und finde es dort auch sehe verständlich erklärt.