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

problematische Seite

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.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.

  1. problematische Seite

    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
    1. problematische Seite

      Danke, Rolf, für die Aufklärung…

  2. problematische Seite

    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.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?

    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.“