Prüfpunkt co2.bild.ueberdimensioniertBilder
Woran erkennt die Prüfung, dass ein Bild breiter geliefert wird, als es angezeigt wird?
Ein Foto mit 4.000 Pixeln Breite, das in einer Spalte mit 400 Pixeln erscheint, überträgt ein Vielfaches der Bytes, die der Bildschirm zeigen kann. Die Prüfung vergleicht bei jedem Bild, das der Browser beim Aufruf geladen hat, die Breite der Datei mit der Breite, in der es angezeigt wird. Liegt die Datei über der Anzeigebreite plus 10 % Spielraum, meldet sie das mit der Anzahl und einem Beispiel: Naturbreite und Anzeigebreite in Pixeln.
Ein Foto aus dem Telefon ist für eine Spalte viel zu groß
Ein Foto aus einem gängigen Telefon hat leicht über 5 MB, schrieb das WordPress-Team 2019 und nannte solche Dateien viel größer als nötig und nicht für das Web aufbereitet. WordPress verkleinert deshalb seit Version 5.3 jedes hochgeladene Bild, dessen Breite oder Höhe 2.560 Pixel übersteigt, auf diese Grenze und verwendet es als volle Größe; das Original bleibt im Upload-Ordner. Setzt ein Theme die volle Größe in eine Spalte mit 400 Pixeln, ist die Datei immer noch mehr als sechsmal so breit wie die Anzeige.
Auch mit srcset kommt oft die falsche Datei
Mit srcset und sizes bietet eine Seite seit 2014 mehrere Breiten eines Bildes an, und der Browser wählt die passende. Im Web Almanac 2024 nutzten 42 % der Seiten am Telefon srcset, bei der vorigen Auswertung 34 %. Die Auswahl hängt an sizes: Das Attribut sagt dem Browser vorab, wie breit das Bild im Layout wird. Im Median war die Angabe am Telefon 16 % zu groß und am Desktop 43 %. Ein Viertel der Desktop-Seiten mit Breitenangaben im srcset lud deshalb 180 KB oder mehr an Bilddaten zu viel, das schlechteste Zehntel fast ein Megabyte, obwohl die passende kleinere Datei bereitlag.
Die Rechnung
Die Prüfung misst in einem Desktop-Fenster mit 1.280 Pixeln Breite und der Pixeldichte 1. Die nötige Breite ist dort die Anzeigebreite; darauf gibt die Prüfung 10 % Spielraum, weil Bildwerkzeuge auf Stufen runden. Bei srcset wertet sie die Fassung, die der Browser in diesem Fenster lädt. Gemeldet wird ein Bild erst, wenn die Datei mindestens 200 Pixel breit ist und die geschätzte Ersparnis mindestens 4 KiB (4.096 Bytes) beträgt. Bei Bildern fremder Server entscheidet allein die Breite, bis der Server die Größe mit der Kopfzeile Timing-Allow-Origin freigibt. Geschätzt wird wie bei Lighthouse: die Bytes der Datei mal eins minus dem Quadrat aus nötiger Breite durch Naturbreite. Lighthouse nimmt bei Bildern mit srcset oder picture 12 KiB als Grenze. Die Regel gilt für Rasterbilder wie JPEG, PNG, WebP und AVIF.
Was es im Punktwert kostet
Jedes zu groß gelieferte Bild kostet einen Punkt im CO₂-Punktwert, höchstens fünf. Die Bytes selbst stecken zusätzlich im Seitengewicht. Zu schmale Bilder meldet die Prüfung als eigenen Hinweis zur Schärfe.
Woher zu große Bilder kommen
Meist wird das Original aus der Kamera oder dem Bildarchiv hochgeladen, und die Seite verkleinert es nur in der Anzeige. Häufig sind auch Themes, die immer die größte Bildgröße einsetzen, und Bildkarussells (Slider), die für alle Bildschirme dieselbe Datei laden.
Beispiele
Spaltenbild
<img src="/bilder/haus-original.jpg" style="width:400px">
<!-- 4000 px breit --><img src="/bilder/haus-400.webp"
srcset="/bilder/haus-400.webp 400w, /bilder/haus-800.webp 800w"
sizes="400px" width="400" height="267"
alt="Unser Haus von der Straße aus">So gehen Sie es an
- Lesen Sie im Befund die Beispieladresse mit Natur- und Anzeigebreite. Die Bildtabelle der Startseite in der Prüfakte zum Herunterladen nennt jedes img-Element mit seiner nötigen Breite und markiert jedes Bild über der Breitengrenze; der Befund zählt davon die Bilder mit mindestens 4 KiB geschätzter Ersparnis.
- Laden Sie jedes Bild in der Breite hoch, in der es erscheint, und die doppelte Breite als zweite Fassung für hochauflösende Bildschirme.
- Lassen Sie das CMS mehrere Größen erzeugen und per srcset und sizes die passende wählen.
- Sehen Sie sich Bildkarussells und Kopfbilder des Themes an: Sie laden oft die größte Fassung.
Tipps aus der Praxis
- Fehlt sizes, rechnet der Browser mit der vollen Fensterbreite (100vw) und wählt am Desktop für ein Bild in einer schmalen Spalte die Datei für den ganzen Bildschirm. Setzen Sie die echte Spaltenbreite ein, etwa sizes="(max-width: 600px) 100vw, 400px".
- Am Dateinamen sehen Sie, welche Fassung WordPress ausliefert: Zwischengrößen enden auf Breite x Höhe, etwa -1024x683.jpg, die verkleinerte volle Größe auf -scaled.jpg. Steht -scaled oder gar kein Zusatz in der Adresse, hat das Theme die volle Größe eingesetzt.
- In neueren Prüfakten steht unter dem Befund eine Tabelle mit den betroffenen Bildern, je Bild mit gelieferter und nötiger Breite in Pixeln. Sie ist die Arbeitsliste für Ihre Agentur.
Weiter im Prüfbereich CO₂ & EmpCo
- 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.
- 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.
- Warum wirkt ein Bild unscharf, und wie stellt die Prüfung das fest?Ist ein Inhaltsbild schmaler als 90 % der Breite, die seine Anzeige braucht, meldet die Prüfung einen Hinweis mit Natur- und nötiger Breite.
- 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.
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.
