Bildoptimierung für Core Web Vitals und LCP

Bilder sind in der Regel der größte Posten beim Seitengewicht. Da die Geschwindigkeit sowohl Nutzererlebnis als auch Ranking direkt beeinflusst, gehört Bildoptimierung zu den wirkungsvollsten Maßnahmen überhaupt. Google misst das über die Core Web Vitals — und Bilder stehen bei zweien davon im Zentrum.

Wie Bilder die Core Web Vitals beeinflussen

LCP (Largest Contentful Paint) misst, wie lange das größte sichtbare Element zum Rendern braucht. Auf den meisten Seiten ist das ein Hero-Bild oder großes Foto — ein schweres, langsames Bild treibt den LCP direkt nach oben. Ziel: unter 2,5 Sekunden.

CLS (Cumulative Layout Shift) misst unerwartete Bewegungen des Inhalts beim Laden. Hat ein Bild keine deklarierten Maße, reserviert der Browser keinen Platz — und alles springt, sobald es eintrifft. Beide Probleme lassen sich mit wenigen Techniken lösen.

1. Modernes Format nutzen

Der Wechsel von JPEG oder PNG zu WebP oder AVIF spart oft 25–50% Größe bei gleicher Qualität. Kleinere Dateien laden schneller — der LCP sinkt direkt. Einen ganzen Ordner auf einmal zu konvertieren — wie mit Scrunch — ist der schnellste Weg, das sitewide anzuwenden.

2. Bilder in Anzeigegröße ausliefern

Ein häufiger Fehler: ein 4000 Pixel breites Foto hochladen und in einem 800-Pixel-Container zeigen. Der Browser lädt trotzdem die volle Datei. Skaliere Bilder etwa auf ihre Anzeigegröße (bis 2x für Retina-Displays) — die Ersparnis ist gewaltig.

3. Responsive Bilder verwenden

Mit dem srcset-Attribut wählt der Browser das passende Bild pro Bildschirm. Ein Handy sollte nie das Desktop-Hero-Bild laden. Ein paar Breiten anzubieten sorgt dafür, dass kleine Screens kleine Dateien bekommen — besonders wichtig für mobile Core Web Vitals.

4. Lazy Loading für Bilder außerhalb des Viewports

Aber niemals beim Hero-Bild

loading="lazy" bei Bildern unterhalb des Folds verschiebt deren Laden, bis sie gebraucht werden, und spart Bandbreite. Das LCP-Bild oben muss dagegen sofort laden — idealerweise mit fetchpriority="high", damit es so schnell wie möglich erscheint.

5. Platz reservieren gegen Layout-Sprünge

Setze immer width- und height-Attribute (oder ein CSS aspect-ratio). So reserviert der Browser den richtigen Platz vor dem Laden — der CLS-schädliche Sprung verschwindet.

Kurz-Checkliste

• Bilder zu WebP oder AVIF konvertieren
• Auf tatsächliche Anzeigegröße skalieren (~2x für Retina)
• Responsive srcset-Breiten anbieten
• Unterhalb des Folds lazy laden
• LCP-/Hero-Bild priorisieren
• width und height setzen gegen Layout-Shift

Format und Größe sind die Grundlage — fang dort an. Scrunch übernimmt den Konvertierungs- und Kompressionsschritt, viele Bilder auf einmal im Browser.