Bilder sind der häufigste Grund, warum Websites bei den Core Web Vitals durchfallen. Sie sind in der Regel das größte Element auf der Seite, blockieren das Rendering und verursachen Layout-Verschiebungen, wenn sie ohne reservierten Platz plötzlich geladen werden.
Die gute Nachricht für Entwickler: Bildprobleme sind die am einfachsten zu behebenden Core Web Vitals-Probleme. Im Gegensatz zu komplexen JavaScript-Anpassungen, die für den INP-Wert erforderlich sind, folgt die Bildoptimierung klaren und wiederholbaren Mustern. Wenn Sie diese richtig umsetzen, verbessern Sie zwei der drei Metriken auf einen Schlag.
Dies ist eine praktische Checkliste, keine Theorielektion. Jeder Punkt kann heute noch umgesetzt werden: Formatwahlen, Ladeattribute, Dimensionsregeln und Bereitstellungs-Setups, die Ihre bildgesteuerten Core Web Vitals-Werte von Rot auf Grün bringen.
Am Ende werden Sie einen wiederholbaren Prozess zur Bildoptimierung haben, den Sie auf jede Seite in jedem Tech-Stack anwenden können.
Wie Bilder die einzelnen Core Web Vitals beeinflussen
Core Web Vitals sind drei Metriken, die Google als Ranking-Signal für die Seitenbenutzererfahrung verwendet und die bei echten Nutzern im 75. Perzentil gemessen werden. Gemäß der offiziellen Core Web Vitals-Dokumentation von Google auf web.dev lauten die drei Metriken und ihre „guten“ Schwellenwerte wie folgt.
LCP (Largest Contentful Paint): unter 2,5 Sekunden
Misst, wie lange das größte sichtbare Element zum Rendern benötigt. Auf den meisten Seiten ist dieses Element ein Bild, meistens das Hero-Bild. Ein schweres, langsam ladendes Hero-Bild ist die häufigste Ursache für einen schlechten LCP-Wert. Bilder stehen im Mittelpunkt dieser Metrik.
CLS (Cumulative Layout Shift): unter 0,1
Misst unerwartete Layout-Verschiebungen beim Laden der Seite. Bilder ohne explizite Breite und Höhe sind die Hauptursache. Wenn ein Bild geladen wird und den Inhalt nach unten schiebt, weil der Browser keinen Platz dafür reserviert hat, entsteht eine Layout-Verschiebung, die Ihren CLS-Wert verschlechtert.
INP (Interaction to Next Paint): unter 200 Millisekunden
Misst die Reaktionsfähigkeit auf Nutzerinteraktionen. INP hat im März 2024 den First Input Delay abgelöst. Bilder beeinflussen den INP-Wert weniger direkt, aber das Dekodieren schwerer Bilder und zu große Dateien belasten den Haupt-Thread und können die Reaktionsbereitschaft verzögern. Leichtere Bilder helfen auch hier.
Bilder beeinflussen also LCP und CLS direkt und wirken sich indirekt auf INP aus. Optimieren Sie Ihre Bilder, und Sie verbessern die beiden Metriken, bei denen die meisten bildlastigen Websites scheitern.
Die Core Web Vitals Schwellenwerte 2026
Behalten Sie diese Zahlen im Hinterkopf. Google misst das 75. Perzentil echter Nutzer, sodass 75 % der Besuche „gut“ sein müssen, um zu bestehen.
Checkliste Teil 1: LCP beheben (Ihr Hero-Bild)
Beim LCP sind Bilder am wichtigsten. Das größte Element ist fast immer ein Bild, daher zielen diese Korrekturen direkt darauf ab.
1. Stellen Sie das LCP-Bild als AVIF oder WebP bereit
Moderne Formate reduzieren die Dateigröße des LCP-Bildes drastisch. AVIF ist bis zu 50 % kleiner als JPEG, WebP etwa 25 bis 35 % kleiner. Kleinere Dateien bedeuten schnelleres Laden und damit einen besseren LCP-Wert. Dieser Vergleich von JPEG, PNG, WebP und AVIF zeigt Ihnen, welches Format Sie wählen und wie Sie Fallbacks für alle Browser einrichten.
2. Fügen Sie fetchpriority="high" zum LCP-Bild hinzu
Sagen Sie dem Browser, dass dieses Bild wichtig ist. Das Hinzufügen von fetchpriority="high" zu Ihrem Hero-Bild veranlasst den Browser, es früher herunterzuladen, noch vor Ressourcen mit niedrigerer Priorität. Dieses einzige Attribut kann Hunderte von Millisekunden beim LCP einsparen.
3. Laden Sie das LCP-Bild niemals per Lazy Loading
Lazy Loading eignet sich hervorragend für Bilder außerhalb des sichtbaren Bereichs, aber loading="lazy" auf Ihr Hero-Bild anzuwenden, ist ein klassischer Fehler. Es verzögert das wichtigste Bild der Seite. Das LCP-Bild sollte sofort, sofortig (eager) und mit hoher Priorität geladen werden.
4. Hero-Bild vorladen (Preload)
Fügen Sie ein <link rel="preload" as="image">-Tag im head-Bereich für Ihr Hero-Bild hinzu, damit der Browser es frühzeitig entdeckt, bevor er das restliche HTML vollständig analysiert hat. Kombinieren Sie dies mit fetchpriority high für maximale Wirkung.
5. Passen Sie das Bild an seine Anzeigegröße an
Ein 3000 Pixel breites Bild in einem 800 Pixel breiten Container bereitzustellen, verschwendet Ladezeit für Pixel, die niemand sieht. Skalieren Sie das Hero-Bild auf die maximale Größe, in der es tatsächlich angezeigt wird, und stellen Sie responsive Varianten für kleinere Bildschirme bereit. Dies ist oft der größte Hebel zur Verbesserung des LCP.
6. Halten Sie die TTFB unter 200 ms
Die Time to First Byte ist die Basis für den LCP. Wenn Ihr Server eine Sekunde für die Antwort benötigt, hilft auch die beste Bildoptimierung nicht. Nutzen Sie ein CDN, aggressives Caching und Edge-Delivery. Das Ziel liegt bei einer TTFB unter 200 ms, da das LCP-Bild nur so schnell geladen werden kann, wie der Server antwortet.
Möchten Sie Ihr Hero-Bild und Ihre Inhaltsbilder auf die richtige Größe und das passende Format komprimieren? Nutzen Sie den kostenlosen Bildkompressor → für schnelle AVIF- und WebP-Komprimierung oder probieren Sie den benutzerdefinierten Kompressor →, um exakte Abmessungen, Formate und Qualitätsstufen für jeden Breakpoint zu steuern. Beide laufen direkt in Ihrem Browser, ohne dass Dateien auf einen Server hochgeladen werden.
Checkliste Teil 2: CLS beheben (Platz für Bilder reservieren)
Ein durch Bilder verursachter CLS-Wert hat fast immer dieselbe Ursache: Der Browser weiß nicht, wie groß das Bild sein wird, reserviert keinen Platz und verschiebt den Inhalt, sobald das Bild geladen wird. Die Lösung besteht immer darin, diesen Platz vorab zu reservieren.
7. Setzen Sie immer width- und height-Attribute
Jedes Bildelement benötigt explizite width- und height-Attribute. Der Browser nutzt diese, um das Seitenverhältnis zu berechnen und den passenden Platz zu reservieren, bevor das Bild lädt – was Layout-Verschiebungen verhindert. Dies ist die wichtigste CLS-Korrektur und wird am häufigsten vergessen.
8. Nutzen Sie die CSS-Eigenschaft aspect-ratio für responsive Bilder
Für responsive Bilder, die sich an ihren Container anpassen, setzen Sie die CSS-Eigenschaft aspect-ratio, damit der Browser bei jeder Bildschirmbreite proportionalen Platz reserviert. In Kombination mit den width- und height-Attributen bleibt das Layout über alle Breakpoints hinweg stabil.
9. Reservieren Sie Platz für spät ladende Bilder
Für Bilder, die durch JavaScript, in Karussells oder weiter unten auf der Seite nachgeladen werden, sollten Sie sicherstellen, dass deren Container von Anfang an feste Abmessungen haben. Ein Bild, das nach einer Interaktion erscheint, sollte in einen vorab reservierten Bereich eingefügt werden, ohne die Seite zu verschieben.
10. Vermeiden Sie das Einfügen von Bildern über bestehendem Inhalt
Wenn Sie ein Bild (z. B. eine Werbung, ein Banner oder ein spät ladendes Hero-Bild) über Inhalten einfügen, die der Nutzer bereits liest, springt alles nach unten. Reservieren Sie den Platz im Voraus oder platzieren Sie das Element weiter unten, wo es den Lesefluss nicht stört.
Checkliste Teil 3: Bereitstellung optimieren (jedes Bild)
Diese Punkte gelten für alle Bilder auf der Seite, nicht nur für das Hero-Bild. Ihr Nutzen summiert sich auf bildlastigen Seiten erheblich.
11. Lazy Loading für Bilder außerhalb des sichtbaren Bereichs
Fügen Sie loading="lazy" zu jedem Bild hinzu, das sich außerhalb des initial sichtbaren Bereichs (Below-the-fold) befindet. Der Browser lädt diese Bilder erst, wenn der Nutzer in ihre Nähe scrollt. Das spart Bandbreite und entlastet den Haupt-Thread für den kritischen Inhalt oben. Wenden Sie es jedoch niemals auf das LCP-Bild an.
12. Responsive Bilder mit srcset bereitstellen
Nutzen Sie die Attribute srcset und sizes, um jedem Gerät passend dimensionierte Bilder zu liefern. Ein Smartphone erhält ein kleines Bild, ein Desktop-PC ein großes. Dies kann das Gewicht mobiler Bilder halbieren – und da Google Felddaten mobiler Nutzer bewertet, ist das mobile Gewicht entscheidend.
13. Komprimieren Sie jedes Bild, nicht nur das Hero-Bild
Eine Seite hat vielleicht ein Hero-Bild, aber zwanzig Inhaltsbilder. Diese zwanzig fallen ins Gewicht. Komprimieren Sie alle auf 80 bis 85 % Qualität. Der vollständige Leitfaden zur Komprimierung von Bildern für die Website-Geschwindigkeit deckt den gesamten Workflow ab, einschließlich Automatisierungen für größere Projekte.
14. Nutzen Sie ein CDN oder einen Bildservice
Bild-CDNs (Cloudinary, ImageKit, Cloudflare Images) liefern Bilder von Servern in der Nähe des Nutzers aus, konvertieren sie automatisch in AVIF oder WebP und passen sie dynamisch an das jeweilige Gerät an. Für inhaltsreiche Websites kann diese einzige Maßnahme die meisten bildbezogenen Core Web Vitals-Probleme sofort beheben.
15. Gehen Sie mit PNGs vorsichtig um
PNGs sind oft die schwersten Bilder auf einer Seite. Wenn Sie PNG-Screenshots oder Grafiken haben, erfahren Sie hier, wie Sie PNG-Bilder um bis zu 70 % komprimieren können, oder konvertieren Sie sie in WebP, um Transparenz bei einem Bruchteil der Dateigröße zu erhalten.
So messen Sie Ihre bildgesteuerten Core Web Vitals
Sie können nur optimieren, was Sie messen. Nutzen Sie diese Tools in der folgenden Reihenfolge:
- PageSpeed Insights: Geben Sie Ihre URL ein, um Labor- und reale Nutzerdaten (Felddaten) abzurufen, und prüfen Sie das identifizierte LCP-Element
- Chrome DevTools Performance-Panel: Zeichnen Sie einen Ladevorgang auf, um genau zu sehen, welches Bild das LCP-Element ist und wie lange es lädt
- Lighthouse: Führen Sie es bei jedem größeren Deployment aus, um Regressionen zu erkennen, bevor sie online gehen
- Google Search Console Core Web Vitals-Bericht: Verfolgen Sie die Erfolgsquoten realer Nutzer auf Ihrer gesamten Website über einen Zeitraum von 28 Tagen
- Web Vitals Chrome-Erweiterung: Sehen Sie LCP, CLS und INP live beim Surfen während der Entwicklung
Beginnen Sie mit PageSpeed Insights, um Ihr LCP-Element zu finden. Wenn es ein Bild ist (was meistens der Fall ist), hat die obige LCP-Checkliste höchste Priorität.
Ein Hinweis zu Bildern außerhalb der Website
Core Web Vitals betreffen nur Ihre eigenen Seiten, aber dieselbe Disziplin bei der Komprimierung hilft überall dort, wo Bilder geteilt werden. Wenn Sie Inhalte in sozialen Netzwerken veröffentlichen, zeigt Ihnen der Spickzettel für Social-Media-Bildgrößen die richtigen Abmessungen für jede Plattform, damit Sie auch dort korrekt formatierte Bilder bereitstellen und vermeiden, dass die Plattformen übergroße Uploads neu komprimieren.
Die Prioritätenfolge: Was zuerst behoben werden sollte
Wenn Sie nur Zeit für wenige Korrekturen haben, setzen Sie diese in der folgenden Reihenfolge um, um die größte Wirkung auf Ihre Core Web Vitals zu erzielen:
- Erstens: Fügen Sie jedem Bild width und height hinzu (behebt die meisten CLS-Probleme sofort)
- Zweitens: Konvertieren und komprimieren Sie das LCP-Hero-Bild in AVIF oder WebP in der tatsächlichen Anzeigegröße
- Drittens: Fügen Sie fetchpriority high und Preload für das Hero-Bild hinzu und entfernen Sie jedes Lazy Loading von diesem Bild
- Viertens: Aktivieren Sie Lazy Loading für alle Bilder weiter unten auf der Seite
- Fünftens: Fügen Sie srcset für die responsive Größenanpassung hinzu
- Sechstens: Verlagern Sie die Bildauslieferung auf ein CDN oder einen Bildservice
Allein die ersten drei Maßnahmen beheben einen Großteil der durch Bilder verursachten Core Web Vitals-Probleme auf den meisten Seiten. Sie lassen sich an einem Nachmittag erledigen – es ist kein mehrwöchiger Sprint nötig.
5 Bildfehler, die Ihre Core Web Vitals unbemerkt verschlechtern
1. Lazy Loading beim Hero-Bild
Das häufigste Eigentor. Lazy Loading für das LCP-Bild verzögert genau das Element, das die Metrik misst. Laden Sie das Hero-Bild sofort (eager) und alles darunter per Lazy Loading.
2. Fehlende width- und height-Attribute
Keine Abmessungen bedeuten keinen reservierten Platz und somit Layout-Verschiebungen. Dieses Versäumnis ist der Hauptgrund für schlechte CLS-Werte. Fügen Sie die Attribute immer und bei jedem Bild hinzu.
3. Ausliefern zu großer Bilder
Ein 4000 px breites Bild in einem 800 px breiten Container lädt viermal langsamer als nötig. Skalieren Sie es auf die Anzeigegröße und nutzen Sie responsive Varianten. Der Nutzer sieht die überschüssigen Pixel nie, spürt aber die Wartezeit.
4. Weiterhin überall JPEG und PNG verwenden
Wer an veralteten Formaten festhält, verzichtet auf 25 bis 50 % Einsparung bei der Dateigröße. Wechseln Sie zu AVIF oder WebP mit Fallbacks, um den LCP-Wert auf der gesamten Website zu verbessern.
5. Nur das Hero-Bild optimieren
Das Hero-Bild ist für den LCP-Wert am wichtigsten, aber zwanzig schwere Inhaltsbilder verlangsamen die Seite trotzdem und blockieren die Bandbreite. Komprimieren Sie jedes Bild auf der Seite, nicht nur das im oberen Bereich.
Zusammenfassung
Bilder sind der häufigste Grund, warum Websites die Core Web Vitals nicht bestehen, aber gleichzeitig auch das am einfachsten zu lösende Problem. Sie bestimmen den LCP direkt, verursachen die meisten CLS-Probleme und erhöhen das Seitengewicht, was sich auf den INP auswirkt. Wenn Sie sie optimieren, verbessern sich zwei der drei Metriken gleichzeitig.
Gehen Sie die Checkliste systematisch durch: Abmessungen für alle Bilder gegen CLS, ein komprimiertes Hero-Bild im modernen Format mit hoher Priorität für den LCP, und anschließend Lazy Loading sowie responsive Skalierung für den Rest. Messen Sie mit PageSpeed Insights und der Search Console und behandeln Sie Verschlechterungen wie Software-Bugs.
Die meisten bildgesteuerten Core Web Vitals-Probleme lassen sich auf wenige Muster zurückführen. Wenn Sie diese einmal verinnerlicht haben, können Sie jede Seite an einem Nachmittag in den grünen Bereich bringen.