Guide
Bilder komprimieren für schnelle Ladezeit und besseren LCP
Ein Hero-Bild ist sehr oft der größte Hebel für den Largest-Contentful-Paint-Wert einer Seite.
By Buğra SözeriPublished
Core Web Vitals bewerten eine Seite anhand des Largest Contentful Paint — der Zeit, bis das größte sichtbare Element (auf Content-Websites fast immer ein Hero-Bild, Banner oder Foto im sichtbaren Bereich) fertig gerendert ist. Googles Schwelle für „gut“ liegt bei 2,5 Sekunden am 75. Perzentil echter Besuche. Auf bildlastigen Seiten ist die Dateigröße genau dieses einen Bildes oft der größte verfügbare Hebel — ein unkomprimiertes 4-MB-Foto kann den LCP-Wert auf einer mittelmäßigen Mobilverbindung im Alleingang über die Schwelle drücken, während eine korrekt komprimierte Version desselben Fotos in einem Bruchteil einer Sekunde lädt.
Warum die Dateigröße den LCP-Wert auf bildlastigen Seiten dominiert
Die Downloadzeit skaliert direkt mit den übertragenen Bytes und der verfügbaren Bandbreite. Bei einer 4G-Verbindung mit realistisch wenigen Megabit pro Sekunde kann ein unoptimiertes 3–4-MB-Foto eine volle Sekunde oder mehr allein zum Herunterladen brauchen, bevor der Browser es überhaupt dekodiert und zeichnet — und das noch vor der Serverantwortzeit, dem DNS-Lookup und etwaigen renderblockierenden Ressourcen davor in der Ladereihenfolge. Komprimieren Sie dasselbe Foto auf eine korrekt dimensionierte WebP-Datei unter 200 KB, verschwindet der Download-Anteil des LCP praktisch aus dem Budget.
Realistische Zielgrößen
| Bildrolle | Sinnvolle Zielgröße |
|---|---|
| Volle Breite Hero / Banner | 100–250 KB |
| Foto im Artikeltext | 50–150 KB |
| Thumbnail / Karten-Bild | 10–40 KB |
| Icon / Logo (wo möglich SVG verwenden) | Unter 10 KB |
Diese Zielwerte setzen voraus, dass das Bild auch auf seine tatsächlichen Anzeigemaße verkleinert wurde — eine 4000 px breite Quelldatei in einen 1200 px breiten Hero-Slot zu laden verschwendet Bandbreite für Pixel, die der Browser sofort verwirft, unabhängig davon, wie gut die Datei komprimiert ist. Kombinieren Sie das Verkleinern auf die Anzeigegröße mit Format- und Qualitätskomprimierung für die größte Verbesserung.
Die Formatwahl zählt genauso wie der Qualitätsregler
Bei fotografischen Inhalten schlägt WebP JPEG typischerweise um 25–35 % bei gleicher visueller Qualität, und jeder große Browser unterstützt es seit 2020 — auf einer modernen Website gibt es kaum einen Grund, standardmäßig JPEG zu verwenden. Bei Grafiken mit großen einfarbigen Flächen, scharfen Kanten oder Text (Screenshots, Diagramme, Logos) vergleichen Sie WebP mit PNG, statt automatisch von einem WebP-Vorteil auszugehen; siehe PNG vs. JPG vs. WebP für die Entscheidungshilfe. Welches Format Sie auch wählen, die Kombination aus korrekten Pixelmaßen plus sinnvoller Qualitätseinstellung (75–85 bei WebP/JPEG) ist es, was den LCP-Wert tatsächlich bewegt — nicht das Format allein.
Frequently asked questions
- Was ist ein guter LCP-Wert?
- Googles Schwelle für „gut“ liegt bei 2,5 Sekunden oder schneller, gemessen am 75. Perzentil echter Nutzerbesuche. Zwischen 2,5 und 4 Sekunden gilt als „verbesserungswürdig“; über 4 Sekunden als „schlecht“. Auf den meisten inhaltsreichen Seiten ist das LCP-Element ein großes Bild, sodass Komprimierung und Format genau dieses einen Bildes oft entscheiden, in welche Kategorie die Seite fällt.
- Behebt Bildkomprimierung allein einen langsamen LCP-Wert?
- Meist zu einem großen Teil, aber nicht vollständig. Die Dateigröße bestimmt die Downloadzeit, die auf bildlastigen Seiten typischerweise den größten Anteil am LCP ausmacht, aber renderblockierendes CSS/JS, die Serverantwortzeit und ob das Bild für frühes Laden priorisiert ist, tragen ebenfalls bei. Das LCP-Bild zu komprimieren ist auf den meisten Websites der wirksamste einzelne Hebel, aber nicht der einzige.
- Sollte ich für jedes Bild WebP verwenden, um die Ladezeit zu verbessern?
- Bei Fotos ja, fast immer — WebP erzeugt bei vergleichbarer visueller Qualität typischerweise 25–35 % kleinere Dateien als JPEG, und alle großen Browser unterstützen es seit 2020. Bei Grafiken mit großen einfarbigen Flächen und Text (Screenshots, Diagramme, Logos) sollten Sie WebP gegen PNG vergleichen, statt automatisch von einem WebP-Vorteil auszugehen, da PNGs verlustfreie Komprimierung bei solchen Inhalten gelegentlich gewinnt.
Sources & references
Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.
- web.dev — Largest Contentful Paint (LCP) — Googles Definition der LCP-Metrik und der 2,5-Sekunden-Schwelle für „gut“(as of )
- web.dev — Optimize LCP — Leitfaden zu Bildkomprimierung, Formatwahl und Ressourcenpriorität für LCP(as of )
- Google Search Central — Page Experience report — Wie Core Web Vitals in die Page-Experience-Signale der Suche einfließen(as of )
Related
Published September 25, 2026