Bilder für deine Website optimieren: Core Web Vitals & LCP 2026
Wie du Bilder für deine Website richtig optimierst: WEBP/AVIF, responsive Bilder, Lazy Loading und LCP-Optimierung für Google Core Web Vitals.
Bilder sind in 9 von 10 Fällen der Grund für schlechte Core Web Vitals. Wer LCP unter 2,5 Sekunden bringen will, kommt an moderner Bildkompression nicht vorbei. Dieser Leitfaden zeigt die fünf wichtigsten Hebel — alles ohne Server-Software, ohne CDN-Migration und ohne Build-Pipeline-Umbau.
Voraussetzung: Du weißt, dass dein LCP-Element (Largest Contentful Paint) in ~80 % aller modernen Websites ein Bild ist — meist das Hero-Bild oberhalb des Folds. Wenn du dieses eine Bild optimierst, gewinnst du oft 1–2 Sekunden LCP. Alles andere ist Feinarbeit.
1. Format: WEBP als Standard, AVIF on top
Stelle alle JPG- und PNG-Assets auf WEBP um. Du sparst sofort 25–35 % Dateigröße bei gleicher Qualität — ohne sichtbaren Unterschied für den Nutzer. Bei einer typischen Landingpage mit 12 Bildern sind das schnell 1–2 MB weniger Transfer.
Wenn du Zeit für die Implementierung hast, liefere AVIF als zusätzliche <picture>-Source aus. Moderne Browser (Chrome 85+, Firefox 113+, Safari 16.4+) wählen automatisch das kleinere AVIF, ältere fallen auf WEBP oder JPG zurück. Typischer Gewinn vs. WEBP: nochmal 15–25 %.
Konkret im HTML: Erst <source type="image/avif">, dann <source type="image/webp">, dann <img> mit JPG/PNG als ultimativer Fallback. Vergiss nicht width, height und alt — sie sind für LCP und CLS gleichermaßen kritisch.
2. Dimensionierung & responsive Bilder
Liefere nie Bilder größer als die maximale Darstellungsgröße. Ein Hero-Bild braucht Desktop maximal 1920 px, Mobile reichen 768 px. Wer ein 4000-px-Original ungebremst ausspielt, verschwendet 80 % der Bandbreite — der Browser skaliert das Bild ohnehin auf die Container-Größe herunter.
Nutze srcset und sizes für responsive Bilder. Generiere für jedes Bild mindestens drei Größen (z. B. 480 / 1024 / 1920) und lass den Browser anhand des Viewports das passende Asset wählen. Build-Tools wie Astro, Next.js Image oder vite-imagetools automatisieren das vollständig.
| Container-Breite | Empfohlene srcset-Werte | DPR-2-Aufschlag |
|---|---|---|
| 320 px (Mobile) | 320, 480 | 640 |
| 768 px (Tablet) | 768, 1024 | 1536 |
| 1280 px (Laptop) | 1280, 1600 | 2560 |
| 1920 px (Desktop XL) | 1920 | kein DPR-2 nötig |
3. Lazy Loading & Priority Hints
- loading="lazy" für alle Bilder unterhalb des Folds. Reduziert initialen Transfer und gibt der CPU Luft für kritische Ressourcen.
- fetchpriority="high" für das LCP-Element (meist das Hero-Bild) — wichtigster Single-Hebel für LCP unter 2,5 s.
- decoding="async" für non-kritische Bilder. Verhindert Render-Blocking während der Bilddekodierung.
- Niemals loading="lazy" auf das Hero-Bild — du verzögerst LCP künstlich um 200–400 ms.
- preload-Hint im <head> für das LCP-Bild, wenn dein Framework keine automatische Priorisierung macht.
4. Kompression: smart statt brutal
85–90 % Qualität liefert für die meisten Fotos die beste Balance. Bei UI-Screenshots und Grafiken funktioniert PNG → WEBP-Lossless oft besser als verlustbehaftete Kompression. Vermeide pauschale „70 %"-Defaults — bei Hauttönen und Verläufen entstehen sichtbare Artefakte.
Wer bewusst optimieren will, vergleicht zwei Encodings mit dem Auge (oder SSIM-Tools) — und wählt die niedrigste Qualität, bei der die Unterschiede zum Original noch unsichtbar sind. Das spart oft weitere 10–15 % gegenüber dem Default.
| Bildtyp | Empfohlenes Format | Qualität |
|---|---|---|
| Foto / Hero | AVIF + WEBP fallback | 75–85 |
| Produktbild | WEBP | 80–90 |
| UI Screenshot | WEBP lossless oder PNG | — |
| Logo / Icon | SVG | — |
| Hintergrund-Textur | AVIF Q60 | 60–70 |
| Avatar / Thumbnail | WEBP Q80 | 75–80 |
5. CLS: width und height nie vergessen
Cumulative Layout Shift (CLS) ist der zweite große Killer von Core Web Vitals. Lösung: width und height als HTML-Attribute (nicht nur CSS) auf jedem <img>-Tag. Der Browser reserviert dann den korrekten Platz, bevor das Bild geladen ist — kein Rumspringen beim Scrollen.
Bei responsiven Bildern reicht das Verhältnis: width="1600" height="900" auf einem Hero-Bild signalisiert dem Browser 16:9 — egal, wie breit der Container am Ende ist. CSS regelt dann die tatsächliche Darstellung.
6. CDN, Caching & HTTP/3
Optimierte Bilder bringen wenig, wenn sie über eine langsame Leitung kommen. Ein CDN (Cloudflare, Fastly, Bunny) reduziert Latenz um Faktor 2–5 — gerade auf Mobile. Setze Cache-Control: public, max-age=31536000, immutable auf alle Bilder mit Hash im Dateinamen.
HTTP/3 (QUIC) liefert Bilder auf instabilen Mobile-Verbindungen 20–30 % schneller als HTTP/2 — alle großen CDNs unterstützen es 2026 ohne Extra-Konfiguration. Wenn dein Hosting kein HTTP/3 spricht, ist das oft der schnellste Performance-Hebel der Welt.
7. Tooling — was im Browser geht
Du kannst alle Schritte ohne Backend lösen: Konvertiere mit dem Image Optimizer batchweise auf WEBP oder AVIF, ohne dass deine Bilder dein Gerät verlassen. Ideal für CMS-Migrationen, Bestandsseiten-Audits und manuelle Pflege von Hero-Bildern.
Für automatisierte Pipelines empfehlen wir vite-imagetools, sharp im Node-Build oder eines der etablierten Image-CDNs (Cloudinary, imgix, Cloudflare Images). Die Browser-Variante ergänzt diese Tools, ersetzt sie aber nicht in High-Volume-Setups.
Checkliste vor dem Launch
- Hero-Bild: AVIF + WEBP + JPG-Fallback, fetchpriority="high", preload-Hint im <head>.
- Alle Bilder: width und height als HTML-Attribute, alt-Text vorhanden.
- Below-the-fold: loading="lazy" und decoding="async".
- srcset und sizes für responsive Layouts mit mindestens drei Größen.
- Cache-Control auf 1 Jahr für gehashte Assets, ETag aktiviert.
- PageSpeed-Insights-Score auf Mobile prüfen — Ziel: LCP < 2,5 s, CLS < 0,1.
Direkt loslegen: Image Optimizer
Konvertiere und optimiere deine Bilder lokal im Browser — ohne Upload, ohne Anmeldung, DSGVO-konform. Oder scanne deine Website auf ungenutzte Optimierungs-Potenziale.