Wie sieht das nun in der Praxis aus?
Drei Versionen unseres Bildes
large.jpg
(1024 x 768)
medium.jpg
(640 x 480)
small.jpg
(320 x 240)
... und stellen uns vor, wir haben in unserem Design einen Breakpoint bei 736px, an dem unser Grundgerüst von einspaltig zu dreispaltig wechselt.
Das Markup würde dann folgendermaßen aussehen:
<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 736px) 33.3vw,
100vw"
alt="mein schönes Bild" />
- src = Standardgrafik, Fallback
- srcset = Liste an Bildquellen, die zur Verfügung stehen
- Der w-Wert beschreibt hierbei die physikalische Breite des Bildes in Pixeln. Er muss manuell angegeben werden, da der Browser die Breite des Bildes nicht weiss.
- sizes = legt fest, wie breit die Grafik dargestellt werden soll.
- sizes beschreibt auch die Rahmenbedingungen der Darstellung; Neben der Einheit vw sind auch alle anderen CSS-Einheiten wie px, em und die calc()-Funktion möglich.