Bilder optimieren für Core Web Vitals

Deine Website lädt langsam. Du machst einen Lighthouse-Test. Der Bericht sagt: Deine Bilder sind das Problem.

Dieser rote „Largest Contentful Paint"-Wert? Der wird fast immer durch nicht optimierte Bilder verursacht. Und Google nutzt genau diesen Wert, um deine Seite zu ranken.

Core Web Vitals sind die Metriken, die Google am meisten interessieren. Bilder beeinflussen die wichtigste davon. Optimiere deine Bilder und deine Werte springen nach oben. So geht's.

Was sind Core Web Vitals und warum sind Bilder so wichtig?

Core Web Vitals sind drei Leistungskennzahlen, die Google auf jeder Seite misst:

• Largest Contentful Paint (LCP): Wie schnell das größte sichtbare Element lädt. Sollte unter 2,5 Sekunden liegen.
• Interaction to Next Paint (INP): Wie schnell die Seite auf Klicks oder Tippen reagiert. Sollte unter 200 Millisekunden liegen.
• Cumulative Layout Shift (CLS): Wie stark das Seitenlayout beim Laden springt. Sollte unter 0,1 liegen.

Bilder beeinflussen zwei dieser drei Metriken direkt. Ein schweres Hero-Bild ruiniert deinen LCP-Wert. Ein Bild ohne feste Abmessungen verursacht Layout-Verschiebungen, die deinen CLS-Wert verschlechtern.

Warum ist das wichtig für dein Business? Google hat bestätigt, dass Core Web Vitals ein Ranking-Faktor sind. Seiten mit guten Werten bekommen mehr organischen Traffic. Seiten mit schlechten Werten rutschen in den Ergebnissen nach unten.

Die Daten belegen das. Websites, die ihren LCP um über 2 Sekunden verbessert haben, sahen messbare Ranking-Gewinne. Bei umkämpften Keywords kann dieser Geschwindigkeitsunterschied zwischen Seite eins und Seite drei entscheiden.

Bilder sind meistens die schwersten Elemente auf einer Seite. Eine durchschnittliche Webseite lädt über 1 MB an Bildern. Das ist mehr als Skripte, Schriften und HTML zusammen. Optimiere die Bilder und du löst den Großteil des Performance-Problems.

Wie verbesserst du den Largest Contentful Paint mit Bildoptimierung?

LCP misst, wann das größte sichtbare Element fertig gerendert ist. Auf den meisten Seiten ist das ein Hero-Bild, ein Produktfoto oder ein Banner.

Wenn dieses Bild 4 Sekunden zum Laden braucht, ist dein LCP 4 Sekunden. Google will unter 2,5. So schließt du die Lücke.

Komprimiere deine Bilder. Ein 2 MB großes Hero-Bild ist zu groß. Komprimiere es auf 150-200 KB und die Ladezeit sinkt dramatisch. Nutze eine Qualitätseinstellung von 75-85% für Fotos. Der visuelle Unterschied ist fast unsichtbar, aber die Dateigröße sinkt um 80-90%.

Nutze moderne Formate. WebP-Dateien sind 25-35% kleiner als JPEG bei gleicher Qualität. AVIF spart noch mehr. Jeder moderne Browser unterstützt WebP. Der Formatwechsel ist einer der einfachsten LCP-Gewinne.

Skaliere auf die Anzeigegröße. Liefere kein 4000px-Bild, wenn die Seite es nur bei 800px anzeigt. Zuerst skalieren, dann komprimieren. Das allein kann die Dateigröße um 70-80% reduzieren.

Lade dein LCP-Bild vor. Füge einen Preload-Hinweis in dein HTML ein, damit der Browser das Hero-Bild sofort abruft. Ohne diesen Hinweis entdeckt der Browser das Bild erst nach dem Parsen des CSS. Diese Verzögerung kostet hunderte Millisekunden.

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Setze fetchpriority="high" auf das LCP-Bild. Das sagt dem Browser, dieses Bild vor anderen Ressourcen zu priorisieren. Eine kleine Änderung, die echte Zeit beim LCP spart.

Lazy-loade dein LCP-Bild nicht. Das ist ein häufiger Fehler. Lazy Loading verzögert das Bild, bis es in den Sichtbereich scrollt. Dein Hero-Bild ist aber schon beim Laden sichtbar. Lazy Loading fügt unnötige Verzögerung hinzu und verschlechtert deinen LCP-Wert.

Hilft oder schadet Lazy Loading den Core Web Vitals?

Lazy Loading ist super für Bilder unterhalb des sichtbaren Bereichs. Für Bilder oberhalb ist es schrecklich.

Wenn du loading="lazy" zu einem Bild hinzufügst, wartet der Browser, bis der Nutzer in die Nähe scrollt, bevor er es herunterlädt. Das spart Bandbreite für Bilder, die der Nutzer vielleicht nie sieht. Es reduziert das anfängliche Seitengewicht und beschleunigt den ersten Ladevorgang.

Aber wenn du das Hero-Bild oder ein anderes beim ersten Laden sichtbares Bild lazy-loadest, sagst du dem Browser: Warte, bevor du das wichtigste visuelle Element lädst. Das erhöht direkt den LCP.

Die Regel ist einfach. Lazy-loade jedes Bild unterhalb des sichtbaren Bereichs. Lazy-loade nie Bilder oberhalb des sichtbaren Bereichs. Dein Hero-Bild, Header-Logo und alle Inhalte, die ohne Scrollen sichtbar sind, sollten sofort laden.

Für die meisten Seiten bedeutet das: 1-3 Bilder laden sofort. Alles andere bekommt Lazy Loading. Diese Balance gibt dir den besten LCP-Wert bei gleichzeitiger Bandbreiteneinsparung.

Achte auch auf Layout-Verschiebungen durch lazy-geladene Bilder. Wenn ein Bild lädt und den Inhalt nach unten schiebt, ist das ein CLS-Problem. Setze immer explizite width- und height-Attribute auf deine Bilder. Der Browser reserviert Platz, bevor das Bild lädt, und verhindert so Layout-Sprünge.

Welche Bildformate liefern die besten Core Web Vitals Werte?

Das Format, das du wählst, beeinflusst direkt die Dateigröße. Kleinere Dateien laden schneller. Schnelleres Laden bedeutet besseren LCP.

WebP ist aktuell die beste Standardwahl für Webbilder. Es komprimiert 25-35% besser als JPEG ohne sichtbaren Qualitätsverlust. Die Browserunterstützung liegt bei über 97%. Solange du keine sehr alten Browser unterstützen musst, sollte WebP dein Standardformat sein.

AVIF komprimiert noch besser als WebP. Bis zu 50% kleiner als JPEG. Aber die Kodierung ist langsamer und die Browserunterstützung holt noch auf. Nutze AVIF, wenn deine Build-Pipeline es unterstützt und du Fallbacks liefern kannst.

JPEG funktioniert immer noch gut für Fotos. Wenn du es gut komprimierst (Qualität 75-85), ist es eine solide Wahl. Aber WebP liefert fast immer eine kleinere Datei bei gleicher visueller Qualität.

PNG ist richtig für Logos, Icons und Bilder mit Transparenz. Aber PNG-Dateien sind groß. Wenn keine Transparenz nötig ist, konvertiere zu WebP oder JPEG.

Das <picture>-Element lässt dich das beste Format an jeden Browser liefern:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero-Bild" width="1200" height="600">
</picture>

Das liefert AVIF an Browser, die es unterstützen, WebP an die nächste Gruppe und JPEG als Fallback. Jeder Besucher bekommt die kleinstmögliche Datei, die sein Browser verarbeiten kann.

Wie verhinderst du Layout-Verschiebungen durch Bilder?

Layout-Verschiebung passiert, wenn ein Bild lädt und anderen Inhalt verschiebt. Der Text, den du gerade gelesen hast, springt plötzlich nach unten. Ein Button, den du klicken wolltest, rutscht weg. Das ist frustrierend für Nutzer und schlecht für deinen CLS-Wert.

Die Lösung ist einfach. Sag dem Browser immer, wie groß das Bild sein wird, bevor es lädt.

Setze width und height auf jedes Bild. Der Browser nutzt diese Angaben, um das Seitenverhältnis zu berechnen und den richtigen Platz zu reservieren. Auch wenn das Bild noch nicht geladen ist, bleibt das Layout stabil.

<img src="/foto.webp" alt="Produktfoto" width="800" height="600">

Nutze CSS aspect-ratio für responsive Bilder. Wenn deine Bilder mit dem Viewport skalieren, setze das Seitenverhältnis in CSS. Der Browser reserviert den korrekten proportionalen Platz bei jeder Bildschirmgröße.

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Füge keine Bilder dynamisch über bestehenden Inhalt ein. Wenn JavaScript ein Werbebanner oder ein Karussell oben auf der Seite lädt, verschiebt sich alles darunter. Reserviere entweder Platz für dynamische Inhalte oder lade sie unterhalb des sichtbaren Bereichs.

Achte auf schrift-abhängige Layouts. Manchmal kommt Layout-Verschiebung gar nicht von Bildern. Web-Schriften, die spät laden, können Text umformatieren und Bilder verschieben. Nutze font-display: swap und lade deine wichtigsten Schriften vor.

Was ist eine gute Checkliste zur Bildoptimierung für Core Web Vitals?

Hier ist eine Schritt-für-Schritt-Checkliste für jede Seite:

Vor dem Hochladen:

• Skaliere Bilder auf ihre Anzeigegröße (2x für Retina-Bildschirme).
• Komprimiere Bilder auf die richtige Qualität. Nutze 75-85% für Fotos.
• Konvertiere zu WebP oder AVIF wenn möglich.
• Entferne Metadaten (EXIF-Daten, GPS-Koordinaten, Kamera-Infos).

In deinem HTML:

• Setze width und height auf jeden <img>-Tag.
• Füge loading="lazy" zu allen Bildern unterhalb des sichtbaren Bereichs hinzu.
• Füge fetchpriority="high" zum LCP-Bild hinzu.
• Lade das LCP-Bild mit <link rel="preload"> vor.
• Nutze das <picture>-Element, um moderne Formate mit Fallbacks zu liefern.

Nach dem Deployment:

• Führe Lighthouse oder PageSpeed Insights aus. Prüfe deine LCP- und CLS-Werte.
• Schau dir den Bereich „Möglichkeiten" an. Er zeigt Bilder, die noch kleiner sein könnten.
• Teste auf Mobilgeräten. Mobile Verbindungen sind langsamer, daher ist Bildoptimierung dort noch wichtiger.

Wenn du diese Checkliste konsequent befolgst, bleiben deine Core Web Vitals grün. Die meisten Websites sehen einen LCP-Rückgang von 1-3 Sekunden allein durch Bildoptimierung.

Wie testest und überwachst du die Bild-Performance?

Einmal optimieren reicht nicht. Neue Bilder kommen dazu. Inhalte ändern sich. Du musst die Performance laufend überwachen.

Google PageSpeed Insights gibt dir einen schnellen Überblick. Füge eine URL ein und erhalte LCP-, INP- und CLS-Werte für Mobil und Desktop. Es zeigt auch Felddaten von echten Chrome-Nutzern, wenn verfügbar.

Lighthouse (in den Chrome DevTools integriert) führt einen vollständigen Audit durch. Es markiert übergroße Bilder, fehlendes Lazy Loading, Bilder ohne Abmessungen und Bilder in veralteten Formaten. Führe es in einem Inkognito-Fenster aus, um Störungen durch Erweiterungen zu vermeiden.

Google Search Console zeigt Core Web Vitals-Daten für deine gesamte Website. Sie gruppiert URLs nach Status: gut, verbesserungswürdig oder schlecht. Prüfe das monatlich, um Verschlechterungen früh zu erkennen.

WebPageTest zeigt dir eine Filmstreifen-Ansicht, wie deine Seite Frame für Frame lädt. Du siehst genau, wann jedes Bild erscheint und wie es die Render-Timeline beeinflusst.

Der Vergleich beliebter Komprimierungstools hilft dir, das richtige Tool für deinen Workflow zu finden. Ob du ein Bild nach dem anderen komprimierst oder hunderte im Stapel verarbeitest — das richtige Tool macht Optimierung einfach.

Bereit, deine Core Web Vitals zu verbessern?

Bilder sind das größte Gewicht auf den meisten Webseiten. Sie zu optimieren ist die wirkungsvollste Änderung für bessere Core Web Vitals.

Komprimiere deine Bilder. Nutze moderne Formate. Setze korrekte Abmessungen. Lade vor, was wichtig ist. Lazy-loade, was es nicht ist.

CompressIMG übernimmt den Komprimierungsschritt. Lade deine Bilder hoch, wähle deine Qualität und lade optimierte Dateien in Sekunden herunter. Kein Konto nötig. Fang mit deinen Hero-Bildern an und arbeite dich nach unten.

Dein LCP-Wert wird es dir danken.