heinetz: srcset und sizes

SELF-Forum

srcset und sizes

heinetz
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich tue mich etwas schwer mit den beiden Attributen. Ich fange mal mit srcset an und versuche, zu beschreiben, was ich bisher verstanden habe.

<img 
src="/images/1x*/logo/210.png" 
srcset="/images/1x*/logo/210.png 1x,
/images/1x*/logo/420.png 2x"

>
  • Was im Attribut src steht, wird ersetzt durch einen Eintrag aus der Komma-separierten Liste im Attribut srcset, wenn der Browser das Attribut srcset interpretieren kann.
  • Die Einträge in der Liste sind wie folgt aufgebaut: Ressource+Leerzeichen+Bedingung
  • Die Bedingung in dem Beispiel ist die Pixeldichte des anzeigenden Endgeräts.
  • Welche Relavanz hat die Reihenfolge in der Liste

Jetzt, was ich bspw. nicht verstehe:

<img 
src="one.png"  
srcset="/images/1x*/logo/210.png 100w,
/images/1x*/logo/420.png 200w"

>

Was passiert hier?

danke für Tipps und
gruss,
heinetz
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. srcset und sizes

    Bernd
    – Informationen zu den Bewertungsregeln

    Hallo,

    wenn du diesen Artikel dir durchgelesen hast bist du schlauer: https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

    Vor allem dieser Bereich:
    Bilder entsprechend der Viewport-Breite austauschen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. srcset und sizes

      heinetz
      – Informationen zu den Bewertungsregeln

      Ja, den Artikel kenne ich. Aber ich tue mich dennoch schwer und würde mich freuen, wenn Ihr mir helft, das richtig zu verstehen. Ich mache mal weiter mit meinen Beispiel …

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. srcset und sizes

    heinetz (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo Forum,

    <img 
src="one.png"  
srcset="/images/1x*/logo/210.png 100w,
/images/1x*/logo/420.png 200w"
>

    Ich versuche mal, selbst eine Antwort darauf zu geben. In Bezug auf das erste Beispiel:

    • Was im Attribut src steht, wird ersetzt durch einen Eintrag aus der Komma-separierten Liste im Attribut srcset, wenn der Browser das Attribut srcset interpretieren kann.

    genau so

    • Die Einträge in der Liste sind wie folgt aufgebaut: Ressource+Leerzeichen+Bedingung
    • Die Bedingung in dem Beispiel ist die Pixeldichte des anzeigenden Endgeräts.

    In den bedien Punkten hängt's bei mir. Ist der Wert eine Information über das Bild (Breite in Pixel) oder eine Bedingung (minimale Breite des Viewports in Pixel). Unabhängig davon, dass der Wert der selbe sein kann.

    • Welche Relavanz hat die Reihenfolge in der Liste

    Die Reihenfolge war im ersten Beispiel unerheblich, weil immer nur eine Bedingung zutreffen kann. Wie ist das in diesem Beispiel?

    Richtig?

    gruss, heinetz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. srcset und sizes

      JürgenB Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo,

      <img 
src="one.png"  
srcset="/images/1x*/logo/210.png 100w,
/images/1x*/logo/420.png 200w"
>

      die Angaben 100w und 200w sagen dem Browser, wie breit in Pixel die Bilder sind. Anhand dieser Information entscheidet der Browser, welches Bild er nimmt.

      Allerdings meckert bei diesem Beispiel der Validator das Fehlen des sizes-Attributs an. Und was da rein soll, wenn die Bildgröße schon im css ( z.B. img { width: 100% } ) festgelegt ist, weiß ich auch nicht. Ich habe es mit sizes="100vw" probiert, und es scheint zu machen, wass ich will, also je nach Fenstergröße das entsprechende Bild wählen und so groß wie das umgebende Element (Größe im css in em angegeben) anzeigen.

      Gruß
      Jürgen

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln