@@Rolf B > Hallo Edda, > > ich habe das <img> Tag mal editiert, um es lesbarer zu machen. Noch lesbarer wär’s so: ```html,bad <img src="https://via.placeholder.com/300" class="float-md-right img-thumbnail wp-post-image" alt="" loading="lazy" title="" srcset=" https://via.placeholder.com/300 300w, https://via.placeholder.com/1024 1024w, https://via.placeholder.com/150 150w, https://via.placeholder.com/768 768w, https://via.placeholder.com/1236 1236w " sizes="(max-width: 300px) 100vw, 300px" width="300" height="300" /> ``` Ganz schöne Unordnung in `srcset`. Üblicherweise sieht man die Varianten aufsteigend geordnet im Code. Aber was das überhaupt? Das Bild soll 300px breit dargestellt werden, wenn der Viewport mindestens 300px breit ist, ansonsten schmaler (100%). Das heißt, man braucht das Bild in einer Variante mit 300px Breite und für doppelte Bildschirmauflösung eine Variante mit 600px Breite. Ich bin mal so keck und behaupte, den Unterschied zwischen einfacher und doppelter Bildschirmauflösung sieht man deutlich; den zwischen doppelter und noch höherer jedoch kaum, sodass es nicht lohnt, dafür Dateigröße = Datenübertragung zu vergeuden. Dann: ```html <img src="https://via.placeholder.com/300" ⋮ srcset="https://via.placeholder.com/600 2x" sizes="300px" width="300" height="300" /> ``` Das `alt`-Attribut ist mit sinvollem Alternativtext zu füllen. `title=""`{:.bad} ist zu entsorgen. --- > Frage an Gunnar: das sieht nach einem grob unlesbaren Stringmonster aus. Ich kann mangels eigener Erfahrung nicht sagen, wo die Abgrenzung zwischen `<picture>` und `<img srcset>` ist - kann man da mit einem `<picture>` Element bei gleicher Funktionalität lesbarer gestalten? Für verschiedene Auflösungen desselben Bildes ist das `srcset`-Attribut genau richtig. Das `picture`-Element ist für **art direction**{:@en}: - unterschiedliche Bildausschnitte, wenn es keinen Sinn macht, das Bild auf kleinen Vieports einfach nur kleiner darzustellen. Da man dann nichts mehr erkennen kann, bietet es sich an, ein Detail des großen Bildes darzustellen. - unterschiedliche Bildformate: Querformat bei ~~Desktop~~ *landscape mode*{:@en}; Hochformat bei ~~Mobil~~ *portrait mode*{:@en}. 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- *“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai {:@en}

@@Rolf B > Hallo Edda, > > ich habe das <img> Tag mal editiert, um es lesbarer zu machen. Noch lesbarer wär’s so: ```html,bad <img src="https://via.placeholder.com/300" class="float-md-right img-thumbnail wp-post-image" alt="" loading="lazy" title="" srcset=" https://via.placeholder.com/300 300w, https://via.placeholder.com/1024 1024w, https://via.placeholder.com/150 150w, https://via.placeholder.com/768 768w, https://via.placeholder.com/1236 1236w " sizes="(max-width: 300px) 100vw, 300px" width="300" height="300" /> ``` Ganz schöne Unordnung in `srcset`. Üblicherweise sieht man die Vaianten aufsteigend geordnet im Code. Aber was das überhaupt? Das Bild soll 300px breit dargestellt werden, wenn der Viewport mindestens 300px breit ist, ansonsten schmaler (100%). Das heißt, man braucht das Bild in einer Variante mit 300px Breite und für doppelte Bildschirmauflösung eine Variante mit 600px Breite. Ich bin mal so keck und behaupte, den Unterschied zwischen einfacher und doppelter Bildschirmauflösung sieht man deutlich; den zwischen doppelter und noch höherer jedoch kaum, sodass es nicht lohnt, dafür Dateigröße = Datenübertragung zu vergeuden. Dann: ```html <img src="https://via.placeholder.com/300" ⋮ srcset="https://via.placeholder.com/600 2x" sizes="300px" width="300" height="300" /> ``` Das `alt`-Attribut ist mit sinvollem Alternativtext zu füllen. `title=""`{:.bad} ist zu entsorgen. --- > Frage an Gunnar: das sieht nach einem grob unlesbaren Stringmonster aus. Ich kann mangels eigener Erfahrung nicht sagen, wo die Abgrenzung zwischen `<picture>` und `<img srcset>` ist - kann man da mit einem `<picture>` Element bei gleicher Funktionalität lesbarer gestalten? Für verschiedene Auflösungen desselben Bildes ist das `srcset`-Attribut genau richtig. Das `picture`-Element ist für **art direction**{:@en}: - unterschiedliche Bildausschnitte, wenn es keinen Sinn macht, das Bild auf kleinen Vieports einfach nur kleiner darzustellen. Da man dann nichts mehr erkennen kann, bietet es sich an, ein Detail des großen Bildes darzustellen. - unterschiedliche Bildformate: Querformat bei ~~Desktop~~ *landscape mode*{:@en}; Hochformat bei ~~Mobil~~ *portrait mode*{:@en}. 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- *“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai {:@en}