heinetz: Immernoch scrset und sizes

Beitrag lesen

SELF-Forum

Immernoch scrset und sizes

heinetz
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln