<img srcset>

1. Unterschiedliche Pixeldichte

2. Unterschiedliche Pixelbreite

---

<picture>

3. Unterschiedliche Bildmotive

4. Unterschiedliche Dateiformate

Unterschiedliche Pixeldichte

Der X-Faktor: <img> und srcset x

 

Traditionelle Bildschirme

• Ein Pixel im CSS ist ein Pixel auf dem Bildschirm
• Ein CSS-Pixel = 1 Geräte-Pixel (device pixel)

Hochauflösende Bildschirme

• Ein Pixel im CSS entspricht x Pixel auf dem Bildschirm
• Ein CSS-Pixel = x Geräte-Pixel
• Dieses x-Verhältnis heißt Device Pixel Ratio (DPR)

 

<img scrc="small.jpg" alt="" width=""

srcset="medium.jpg 2x. large.jpg 3x">

 

srcset

definiert einen Satz von Grafikdateien

x-Wert gibt die Device-Pixel-Ratio an