Chromium Lighthouse beschwert sich mit: "Stellt Bilder mit niedriger Auflösung bereit"

[Rolf B]

Hallo Bimmelbeule,

es geht hier um das devicePixelRatio (die zugehörige CSS-Mediaquery heißt resolution).

Die meisten Mobilgeräte haben eine so hohe Auflösung, dass sie Pixelangaben hochrechnen müssen, damit die Darstellung nicht zu winzig wird. Wenn eine Webseite ihre Angaben in em macht, wird das automatisch ausgeglichen, aber Bilder haben eine intrinsische Größe in Pixeln und wenn Du ein Bild mit 300x200 Pixeln hast und dieses Bild auf einem "normalen" Desktop mit 100-120 dpi darstellst, ist das okay. Auf einem Retina-Display mit 300 oder 500 dpi wird eine Briefmarke daraus.

Deshalb gibt es den Begriff des "CSS Pixels" - also die Größe des Bildschirms in Pixeln, wie sie für eine Webseite simuliert wird. Aus den 2400x1000 Pixeln eines iPhone (oder was auch immer die genau haben) werden dann zum Beispiel 600x250 CSS Pixel (was einem devicePixelRatio von 4 entsprechen würde).

Für ein Bild bedeutet das, dass es unnötig unscharf wird, wenn Du es mit der CSS Pixelauflösung lädst. Das Bild sieht viel besser aus, wenn Du es mit der doppelten oder vierfachen Auflösung lieferst und den Zuwachs an Dateigröße mit einer höheren Kompression ausgleichst.

Es gibt aber auch spezielle HTML Elemente und Bildattribute, um das zu optimieren. Im Wiki findest Du dazu den Artikel Responsive Bilder mit picture.

Rolf