Bildübermittlung verbessern

Bildübermittlung verbessern, englisch „Improve image delivery“, ist das Insight von Lighthouse 13, das Bilder mit unnötig großem Download meldet. Es erscheint in PageSpeed Insights und im Performance-Panel der Chrome DevTools und ersetzt vier frühere Prüfungen: „Bilder in modernen Formaten bereitstellen“, „Bilder effizient codieren“, „Videoformate für animierte Inhalte verwenden“ und „Bilder richtig dimensionieren“ (Lighthouse-Quellcode, replacesAudits in core/audits/insights/image-delivery-insight.js, Version 13.5, abgerufen am 18.10.2026). Dieser Ratgeber zeigt, wie Sie das Insight lesen, welchen Grund Sie zuerst angehen und wie Sie die beiden Ursachen beheben, für die es hier keinen eigenen Ratgeber gibt: zu schwache Komprimierung und animierte GIFs.

Aus den Messungen von PerfDelta: Von 5.684 gemessenen Startseiten meldet Lighthouse Bildeinsparungen bei: Bilder in passender Größe auf 74 % der Startseiten (Einsparung im Median 1670 ms); moderne Bildformate auf 49 % der Startseiten (Einsparung im Median 2194 ms). Mehr dazu im Datenblock unten.

Wann Lighthouse ein Bild als zu groß meldet

Für jedes Bild, das beim Laden übertragen wurde, vergleicht Lighthouse die Dateigröße mit dem, was eine effizient codierte Datei im selben Format für die tatsächlich angezeigten Pixel bräuchte. Das Pixelverhältnis des Geräts ist dabei berücksichtigt. Die Differenz ist die geschätzte Einsparung. Bilder mit weniger als 4 KiB Einsparung erscheinen nicht in der Liste (Chrome for Developers, Improve image delivery). Auf den Pagespeed-Score wirkt das Insight nicht unmittelbar, es erklärt aber einen Teil des Largest Contentful Paint und des Seitengewichts.

Die Tabelle in PageSpeed Insights lesen

Das Insight zeigt je Bild eine Zeile mit URL, Ressourcengröße und verschwendeten Bytes. Darunter stehen eine oder mehrere Unterzeilen mit dem Grund und der Einsparung für diesen Grund. Die Gründe haben feste Formulierungen; die deutsche Fassung lautet so:

Grund im Bericht	Bedeutung	Maßnahme
Wenn du ein modernes Bildformat (WebP, AVIF) verwendest oder die Bildkomprimierung erhöhst, könnte sich die Downloadgröße dieses Bilds verbessern	JPEG oder PNG, wo WebP oder AVIF deutlich kleiner wären	Bilder in modernen Formaten bereitstellen
Durch eine höhere Bildkomprimierung könnte die Downloadgröße dieses Bilds verbessert werden	Format passt, Qualitätsstufe zu hoch	Abschnitt zur Komprimierung unten
Diese Bilddatei ist für die angezeigten Abmessungen (…) größer als nötig (…)	mehr Pixel geliefert als angezeigt	Bilder richtig dimensionieren
Wenn du Videoformate statt GIFs verwendest, kannst du die Downloadgröße von animierten Inhalten verringern	animiertes GIF	Abschnitt zu GIFs unten

Ein Bild kann zwei Gründe zugleich tragen, etwa ein JPEG mit 2.400 Pixeln Breite, das mit 600 Pixeln angezeigt wird. Die Einsparungen der Unterzeilen lassen sich nicht einfach addieren: Eine verkleinerte Datei im modernen Format spart weniger als beide Schätzungen zusammen. Beheben Sie zuerst die Abmessungen und testen Sie erneut, die Formatersparnis schrumpft dann mit.

Welches Bild zuerst

Den größten Hebel hat das LCP-Bild. Öffnen Sie die LCP-Aufschlüsselung und prüfen Sie, ob das LCP-Element in der Liste steht. Jedes eingesparte Kilobyte verkürzt dann direkt die Ladedauer der Ressource und damit den LCP. Diese Zeile ist wichtiger als ein anderes Bild mit mehr verschwendeten Bytes.

Danach folgen Bilder im sichtbaren Bereich, weil sie in den ersten Sekunden mit dem LCP-Bild um Bandbreite konkurrieren. Große Bilder weiter unten kosten vor allem Datenvolumen; werden sie korrekt verzögert geladen, beeinflussen sie den LCP kaum. Die Regeln dafür stehen im Ratgeber Bilder verzögert laden.

Das Insight bewertet nur Bilder, die im Test geladen wurden. Ein Karussell, das alle Folien sofort lädt, erscheint vollständig, eines mit Nachladen nur mit der ersten Folie.

Komprimierung: wenn das Format stimmt und die Datei trotzdem zu groß ist

Der Grund „Durch eine höhere Bildkomprimierung …“ bedeutet: Die Datei liegt in einem passenden Format, wurde aber mit einer höheren Qualität gespeichert, als bei der angezeigten Größe sichtbar ist. Früher war das die Prüfung „Bilder effizient codieren“. Häufige Ursachen sind Fotos, die aus der Bildbearbeitung mit 100 Prozent Qualität exportiert wurden, Uploads, die das CMS unverändert weiterreicht, und PNG für Fotografien.

Für Fotos sind diese Einstellungen ein guter Ausgangspunkt. Prüfen Sie das Ergebnis mit dem Auge, vor allem bei Gesichtern und Farbverläufen:

# JPEG mit mozjpeg, Qualität 75 bis 80
cjpeg -quality 78 -progressive -outfile hero.jpg hero-original.ppm

# WebP mit Qualität 75
cwebp -q 75 hero-original.png -o hero.webp

# AVIF mit libavif
avifenc --min 20 --max 30 --speed 6 hero-original.png hero.avif

# Stapelverarbeitung mit sharp (Node.js)
const sharp = require('sharp');
await sharp('hero-original.jpg').resize({ width: 1600 }).webp({ quality: 75 }).toFile('hero.webp');

Codieren Sie immer aus dem Original neu und nicht aus einer bereits komprimierten Datei, sonst summieren sich die Artefakte. Logos, Icons und Screenshots mit flächigen Farben liefern Sie besser als SVG oder verlustfreies WebP aus. Erzeugt Ihr CMS beim Hochladen eigene Bildgrößen, stellen Sie die Qualität einmalig dort ein, in WordPress etwa über den Filter wp_editor_set_quality. Dann profitiert jeder künftige Upload.

Animierte GIFs durch Video ersetzen

GIF komprimiert Animationen schlecht. Eine Bildschirmaufnahme von wenigen Sekunden wiegt als GIF oft mehrere Megabyte, als MP4 oder WebM nur einen Bruchteil davon. Für genau diesen Fall erscheint der Grund „Wenn du Videoformate statt GIFs verwendest …“. Wandeln Sie die Datei um und binden Sie sie als stummes Video in Schleife ein; für Besucher verhält es sich wie ein GIF:

# Umwandlung mit ffmpeg
ffmpeg -i animation.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.mp4
ffmpeg -i animation.gif -c:v libvpx-vp9 -b:v 0 -crf 41 animation.webm

<video autoplay loop muted playsinline width="640" height="360" poster="animation-poster.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Lassen Sie width und height am Video stehen, damit der Platz reserviert ist und kein Layout-Sprung entsteht. Wo kein Video-Element möglich ist, sind animiertes WebP oder AVIF eine Alternative.

Bild-CDN und automatische Optimierung

Bei vielen betroffenen Bildern lohnt sich Handarbeit nicht. Ein Bild-CDN oder der Bilddienst Ihrer Plattform liefert Format, Größe und Qualität je Anfrage passend aus: Der Browser sendet Accept: image/avif,image/webp, der Dienst antwortet im besten unterstützten Format und skaliert auf die angefragte Breite. So arbeiten Shopify, Next.js mit next/image, Cloudflare Images und die meisten Bild-Plugins für WordPress. Prüfen Sie nach der Umstellung, ob das LCP-Bild weiter vom eigenen Origin oder über eine früh geöffnete Verbindung kommt. Sonst geht der Gewinn an Bytes an einen zusätzlichen Verbindungsaufbau verloren; die passenden Hinweise erklärt der Ratgeber Preconnect und Preload.

Ergebnis prüfen

1. PageSpeed Insights erneut ausführen und die verschwendeten Bytes je Bild vergleichen. Zeilen unter 4 KiB verschwinden aus der Liste.
2. In der LCP-Aufschlüsselung sollte die Ladedauer der Ressource gesunken sein, wenn das LCP-Bild betroffen war.
3. In den DevTools im Netzwerk-Panel nach „Img“ filtern und Typ (avif, webp) sowie übertragene Größe kontrollieren.
4. Die Wirkung auf den LCP in den folgenden Wochen in den Felddaten bestätigen.

Der kostenlose Website Speed Test von PerfDelta zeigt die Bildeinsparungen für mehrere Seiten Ihrer Website gleichzeitig, mobil und auf dem Desktop, neben den Felddaten und den Werten Ihrer Wettbewerber.

Häufige Fragen

Ist „Bildübermittlung verbessern“ dasselbe wie „Bilder in modernen Formaten bereitstellen“?

Es schließt diese Prüfung ein. Das Insight fasst moderne Formate, Komprimierung, animierte Inhalte und Bildgröße in einer Tabelle zusammen. Die alten Namen erscheinen in Lighthouse 13 nicht mehr.

Warum steht ein Bild nach der Umstellung auf WebP noch in der Liste?

Meist wird es weiterhin größer ausgeliefert als angezeigt, oder das WebP wurde mit sehr hoher Qualität gespeichert. Die Unterzeile nennt den verbliebenen Grund.

Beeinflusst das Insight den Pagespeed-Score?

Nicht direkt, Insights haben kein Gewicht im Score. Kleinere Bilder verkürzen aber LCP und Speed Index, und diese Metriken zählen.

Warum fehlen einige Bilder meiner Seite in der Liste?

Bilder mit weniger als 4 KiB geschätzter Einsparung werden ausgelassen. Bilder, die im Test nicht geladen wurden, etwa verzögert geladene Bilder weit unten, kann Lighthouse nicht bewerten.