Website-Geschwindigkeit

PageSpeed warnt vor Bildern? So behebst du „Bilder richtig dimensionieren“ und „Bilder effizient codieren“

Kurz gesagt: Diese Warnungen bedeuten, dass deine Bilder schwerer sind, als die Seite braucht: Sie haben mehr Pixel, als angezeigt werden, oder sie sind mit einem höheren Dateigewicht gespeichert, als ihre Qualität rechtfertigt. Die Lösung ist für beide dieselbe. Finde die markierten Bilder, verkleinere sie auf die tatsächlich angezeigte Größe, komprimiere sie oder wandle sie in WebP um, lade die neuen Dateien hoch und teste erneut. Alles läuft im Browser; deine Bilder werden nicht zu Refentra hochgeladen.

Bildabmessungen ändern

Dateien werden lokal verarbeitet.

Tool öffnen →
Auf dieser Seite

Was die beiden Warnungen bedeuten

Lighthouse-Bildprüfungen (PageSpeed Insights)
Bilder richtig dimensionieren (Properly size images)
Vergleicht die Größe, in der ein Bild angezeigt wird, mit seiner echten Pixelgröße und berücksichtigt dabei die Pixeldichte des Geräts. Das Bild fällt durch, wenn es mindestens 4 KiB kleiner sein könnte.
Bilder effizient codieren (Efficiently encode images)
Prüft JPEG- und BMP-Dateien und testet, was eine Komprimierung mit Qualität 85 sparen würde. Markiert ab 4 KiB mögliche Ersparnis.
Neuere Lighthouse-Versionen
Seit Lighthouse 13 gehören diese Prüfungen zur Einsicht „Improve image delivery“. Der Rat bleibt gleich.

Quellen: Chrome for Developers, Properly size images und Efficiently encode images (englisch), geprüft am 5. Oktober 2026. Refentra steht in keiner Verbindung zu Google.

Ein großes Foto mit der Beschriftung 2400 px und rotem Rahmen, ein Pfeil und dasselbe Foto deutlich kleiner mit der Beschriftung 600 px und grünem Rahmen.
Ein 2400-px-Foto, das mit 600 px angezeigt wird, verschwendet Bytes; der Besucher sieht die zusätzlichen Pixel nie.

In sechs Schritten beheben

  1. Lies den Bericht. Notiere, welche Bilder markiert sind und wie viele KiB jedes sparen könnte. Beginne mit dem größten.
  2. Finde die angezeigte Größe. Öffne die Seite, klicke das Bild mit der rechten Maustaste, wähle „Untersuchen“ und fahre über das Bild-Tag: Der Browser zeigt die dargestellte Größe neben der intrinsischen (echten) Größe.
  3. Wähle eine Zielbreite. Nimm die angezeigte Breite mal die Pixeldichte, die du ausliefern willst, oft 2 für scharfe Ergebnisse auf hochauflösenden Bildschirmen. Ein 600 px breit angezeigtes Bild braucht etwa 1200 px, nicht 4000.
  4. Verkleinere das Original. Öffne das Größen-Werkzeug, trage diese Breite als Maximum ein, lass „in Maximalmaße einpassen“ und „Vergrößern verhindern“ eingestellt und lade die Kopie herunter.
  5. Mach die Datei leichter. Nutze den Kompressor für Zielgrößen, um eine maximale Dateigröße festzulegen, oder wandle in WebP um, bei Fotos wie bei Grafiken. Prüfe das Ergebnis in voller Größe.
  6. Hochladen, Cache leeren, erneut testen. Ersetze die Bilder, leere Cache-Plugin oder CDN-Cache und starte PageSpeed Insights neu.

Wenn du einen Website-Baukasten, Shop oder ein CMS nutzt

  • Viele Plattformen erzeugen aus einem Upload mehrere Größen und lassen den Browser wählen (srcset). Lädt dein Theme trotzdem die volle Datei, prüfe die Bildgrößen-Einstellung des Themes oder die Größenoption des Blocks.
  • Ein 6000-px-Kamerafoto in einen 600-px-Platz hochzuladen, ist die häufigste Ursache. Verkleinere vor dem Hochladen.
  • Logos und Icons aus Formen sind als SVG besser. Siehe JPG, PNG oder WebP: welches Format.

Was das nicht leistet

  • Die Werkzeuge bereiten deine Dateien vor; sie können das HTML oder Theme deiner Website nicht ändern. Ob eine Seite die richtige Größe ausliefert, hängt von deiner Einrichtung ab.
  • PageSpeed-Werte sind Labormessungen und schwanken zwischen Läufen. Beurteile den Trend und die markierten KiB, nicht einen einzelnen Punktwert.
  • Andere Punkte im Bericht (blockierende Skripte, Schriften, Serverzeit) liegen außerhalb dieses Ratgebers.

Quellen und Methode

Die Beschreibungen und Schwellenwerte der Prüfungen stammen von den zwei verlinkten Chrome-Dokumentationsseiten, geprüft am 5. Oktober 2026; Google kann sie ändern. Schritte und Bezeichnungen der Refentra-Werkzeuge wurden an den aktuellen Werkzeugen geprüft. Dieser Ratgeber wurde mit KI-Unterstützung erstellt und redaktionell bearbeitet.

Weitere Ratgeber

Alle Ratgeber →
HEIC in JPG ohne UploadRatgeber lesen →300 DPI für den Druck: Foto prüfenRatgeber lesen →Unterschrift als transparentes PNGRatgeber lesen →