Prüfpunkt co2.bild.unscharfBilder
Warum wirkt ein Bild unscharf, und wie stellt die Prüfung das fest?
Eine Datei mit 300 Pixeln Breite, die auf 600 Pixel gestreckt wird, wirkt weich und verwaschen, besonders auf hochauflösenden Bildschirmen. Die Prüfung meldet solche Bilder als Hinweis. Der Punktwert bleibt dabei gleich, denn ein kleines Bild überträgt wenige Bytes; es geht um die Bildqualität.
Ein Telefon zeichnet jedes Bildpixel mit mehreren Bildschirmpixeln
Im Juni 2010 stellte Apple das iPhone 4 vor: 960 × 640 Pixel auf 3,5 Zoll, 326 Pixel je Zoll und viermal so viele Pixel wie beim Vorgänger. Browser unterscheiden zwischen Pixeln im Layout (CSS-Pixeln) und Pixeln des Bildschirms. Das Verhältnis heißt Pixeldichte (devicePixelRatio): 1 steht für einen klassischen Bildschirm, 2 für einen hochauflösenden, und moderne Telefone liefern oft mehr als 2. Das HTTP Archive misst Seiten für den Web Almanac am Telefon mit einem 360 Pixel breiten Fenster und der Pixeldichte 3. Ein Bild in einer 300 Pixel breiten Spalte braucht dort 900 Bildpixel in der Breite; kommt es mit 300, streckt der Browser jedes Bildpixel auf neun Bildschirmpixel.
Scharfe Fotos holen mehr Besucher aus der Bildersuche
Google schreibt in seinen Hinweisen zur Bildersuche, dass hochwertige Fotos Nutzer mehr ansprechen als verschwommene, unklare Bilder. Scharfe Bilder wirken auch im Vorschaubild der Suchergebnisse ansprechender und können die Wahrscheinlichkeit erhöhen, dass Besucher kommen. Bei einem Handwerksbetrieb, einem Hotel oder einem Shop zeigt das Foto die Leistung selbst: das sanierte Bad, das Zimmer, das Produkt. Ein weiches Foto lässt diese Arbeit schlechter aussehen, als sie ist. Die Abhilfe kostet wenige Bytes, denn die Fassung in doppelter Breite im srcset laden nur die Bildschirme, die sie brauchen.
Die Rechnung
Die Prüfung misst in einem Desktop-Fenster mit der Pixeldichte 1. Nötig ist dort die Anzeigebreite; ist die Datei schmaler als 90 % davon, gilt sie als unscharf. Die Regel gilt für Inhaltsbilder im Rasterformat ab 100 Pixeln Anzeigebreite. Ausgenommen sind Schmuckbilder (alt="", role="presentation" oder aria-hidden) und SVG-Grafiken, die in jeder Größe scharf sind.
Warum der Hinweis neben der Bildgröße steht
Die Bildtabelle sieht jedes Bild in beide Richtungen an: zu breit geliefert und zu schmal für die Anzeige. Der Hinweis zur Schärfe steht deshalb neben den Befunden zur Bildgröße. Wenn Sie zu große Bilder verkleinern, behalten Sie so die nötige Breite im Blick.
Beispiele
Teamfoto
<img src="/bilder/team-300.jpg" style="width:600px">
<!-- 300 px für 600 px Anzeige --><img src="/bilder/team-600.webp"
srcset="/bilder/team-600.webp 600w, /bilder/team-1200.webp 1200w"
sizes="600px" width="600" height="400"
alt="Das Team vor der Werkstatt">So gehen Sie es an
- Lesen Sie im Hinweis die Beispieladresse mit Natur- und nötiger Breite.
- Laden Sie das Bild mindestens in der Anzeigebreite hoch und bieten Sie die doppelte Breite als zweite Fassung im srcset an. Einfache Bildschirme laden dann die kleinere Datei.
- Gibt es nur die kleine Fassung, wählen Sie ein anderes Bild oder zeigen Sie es in seiner Originalbreite an.
- Bestellen Sie nach dem Austausch eine Nachmessung; die Bildtabelle zeigt dann die neue Breite.
Tipps aus der Praxis
- Probe am Desktop: Vergrößern Sie die Seite mit Strg und + (am Mac Cmd und +) auf 200 %. Damit verdoppelt sich die Pixeldichte, die der Browser meldet, wie bei einem hochauflösenden Bildschirm; was jetzt weich wird, wirkt dort ähnlich. Das Zoomen mit zwei Fingern auf dem Touchpad ändert die Pixeldichte dagegen nicht.
- Ein Hintergrundbild aus dem CSS bekommt mit image-set() eine zweite Fassung für die Pixeldichte 2, etwa image-set(url(kopf.webp) 1x, url(kopf-doppelt.webp) 2x). Die Funktion läuft seit September 2023 in allen gängigen Browsern.
- Ein Foto einer Speisekarte, eines Plans oder einer Preisliste ist nur so scharf wie seine Pixel. Als echter Text auf der Seite ist der Inhalt bei jeder Größe scharf und auch für Vorlesesoftware lesbar.
Mehr zu diesem Thema
Weiter im Prüfbereich CO₂ & EmpCo
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Warum ist eine SVG-Grafik mit eingebettetem Foto ein Befund?Enthält eine SVG-Grafik im HTML der Seite ein eingebettetes Rasterbild über 50 KB, meldet die Prüfung es. Als eigene WebP- oder AVIF-Datei ist es kleiner.
- Warum sollen kleine Symbole als SVG statt als PNG kommen?Symbole bis 48 Pixel Anzeigebreite als PNG, JPEG, GIF oder BMP meldet die Prüfung als Hinweis. Als SVG sind sie bei jeder Pixeldichte scharf und meist kleiner.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
