Unser CSS
img {
width:100%;
height:auto;
}
@media screen and (min-width:448px) {
img {
width:50%;
}
}
@media screen and (min-width:800px) {
img {
width:33%;
}
}
Unser HTML
<img
srcset=" gross.jpg 900w,
mittel.jpg 600w,
klein.jpg 320w"
sizes=" (min-width: 800px) 33vw,
(min-width: 448px) 50vw,
100vw"
src="klein.jpg"
alt=""
/>
Rechenbeispiel
Annahme: unser Viewport ist 700 Pixel breit.
- 700 Pixel > 448px
- 700 Pixel < 800px
- => Bild soll 50% der Viewportbreite einnehmen = 350px
- 350 Pixel > als physkalische Breite von klein.jpg (320w) => der Browser lädt mittel.jpg (600w)
Annahme: Anwender hat Display mit DPR von 2:
- Browser multipliziert den Wert mit 2: 350 Pixel x 2 = 700 Pixel;
- Bild müsste für Retina-Display also mindestens 700 Pixel breit sein => Browser wählt gross.png (900w).