Bootstrap 4.5 | Desktop: Bilder Float | Mobil: Bilder break | Hilfe ich raffe das nicht mehr

[Gunnar Bittersmann]

@@Rolf B

Hallo Edda,

ich habe das <img> Tag mal editiert, um es lesbarer zu machen.

Noch lesbarer wär’s so:

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

<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="" 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:

• 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; Hochformat bei Mobil portrait mode.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!