Ein wenig Mathematik

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).
merken
Nicht mehr merken
X

Sie haben den Inhalt der Merkliste hinzugefügt.