Chromium Lighthouse beschwert sich mit: "Stellt Bilder mit niedriger Auflösung bereit"
Bimmelbeule
Chromium Lighthouse beschwert sich mit: "Stellt Bilder mit niedriger Auflösung bereit"
Bimmelbeule
Rolf B
Matthias ScharwiesHallo!
In den DevTools von Chromium kann man seine Seiten unter dem Reiter "Lighthouse" von Google testen lassen (Modus: Navigation, Geräte: mobil, Categories: alle).
Die fragliche Seite ist ein eingedampftes Beispiel:
https://www.h-felder.de/test/index.html
Unter "Best Practices" beschwert sich Lighthouse mit: "Stellt Bilder mit niedriger Auflösung bereit":
»Die originalen Abmessungen eines Bildes sollten proportional zu der Displaygröße und dem Pixel-Verhältnis sein, damit das Bild optimal angezeigt wird. Weitere Informationen:
Angezeigte Größe: 200x235, Originalgröße: 200x235, Erwartete Größe: 400x470«
Wer erwartet da was und warum? Wie kann ich das "Problem" lösen? Ist das überhaupt ein Problem?
P.s. Die Meldung kommt nur unter "Gerät: mobil", nicht bei Gerät: Computer.
-
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
--
sumpsi - posui - obstruxi -
Servus!
Hallo!
In den DevTools von Chromium kann man seine Seiten unter dem Reiter "Lighthouse" von Google testen lassen (Modus: Navigation, Geräte: mobil, Categories: alle).
Die fragliche Seite ist ein eingedampftes Beispiel:
https://www.h-felder.de/test/index.htmlUnter "Best Practices" beschwert sich Lighthouse mit: "Stellt Bilder mit niedriger Auflösung bereit":
»Die originalen Abmessungen eines Bildes sollten proportional zu der Displaygröße und dem Pixel-Verhältnis sein, damit das Bild optimal angezeigt wird. Weitere Informationen:
Angezeigte Größe: 200x235, Originalgröße: 200x235, Erwartete Größe: 400x470«Wer erwartet da was und warum? Wie kann ich das "Problem" lösen? Ist das überhaupt ein Problem?
Das ist ja ein Logo. Da wäre SVG da Format der Wahl.
Schau mal hier: https://www.rheinsteig.de/portal/dist/_vendor/images/rheinsteig/logo.svg
immer scharf, egal wie groß skaliert.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
