Srcset-Attribut lädt möglicherweise größere Bilder auf Mobilgeräten als auf Desktops

UX
11

Ich irre mich vielleicht, aber ich denke, das ergibt Sinn.
Wenn man sich das HTML srcset ansieht, werden die folgenden Bilder basierend auf dem Geräte-Pixelverhältnis (x1, x1,5, x2) ausgeliefert.

https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x

Normalerweise haben Mobiltelefone ein x2-Verhältnis (oder mehr), da sie eine höhere Pixeldichte haben.
Sie möchten also Bilder mit höherer Auflösung ausliefern.

Geräte-Pixelverhältnis

Das Geräte-Pixelverhältnis (Device Pixel Ratio, DPR) ist eine Zahl, die von Geräteherstellern vergeben wird und für HiDPI-Displays (High Dots Per Inch) oder Retina-Displays (eingetragene Marke von Apple) verwendet wird, die Teil moderner Smartphones, Tablets und sogar einiger Laptops und Monitore sind.
Der DPR steht in direktem Zusammenhang mit der Pixeldichte des Displays, je höher die Dichte, desto größer der DPR-Wert.

Der DPR ist das Verhältnis zwischen physischen (Geräte-) Pixeln und logischen (CSS-) Pixeln in horizontaler (Breite) oder vertikaler (Höhe) Richtung eines Bildschirms.
Mit anderen Worten, der DPR ist eine Zahl, die zur Berechnung der CSS-Auflösung des Bildschirms verwendet wird. Anhand des DPR können wir direkt sehen, wie viele tatsächliche physische Hardware-Pixel ein CSS-Pixel bilden.

Beispiel:
Apple iPhone 12
Auflösung in Geräte-(physischen) Pixeln: 1170 x 2532
DPR: 3
Breite: 1170/3 = 390, Höhe: 2532/3 = 844
Daher Auflösung in CSS-Pixeln: 390 x 844

Da der DPR 3 beträgt, gilt im Pixelraster: 3 (Breite) x 3 (Höhe) = 9; 9 physische Pixel werden verwendet, um ein CSS-Pixel zu bilden.

5 „Gefällt mir“