Bildoptimierung und Core Web Vitals: Ein praktischer Leitfaden
Bilder sind der größte Faktor bei der Web-Performance. So optimierst du sie richtig und verbesserst deine Core Web Vitals.
Google hat vor einigen Jahren angefangen, Core Web Vitals als Ranking-Faktor zu verwenden, und plötzlich hat sich jeder für Seitengeschwindigkeit interessiert. Aber wenn man sich anschaut, was Seiten tatsächlich langsam macht, ist es fast immer der gleiche Übeltäter: Bilder.
Auf einer durchschnittlichen Webseite machen Bilder etwa 50% des gesamten Seitengewichts aus. Bilder richtig machen, und du hast die Hälfte des Performance-Puzzles gelöst.
Die drei Metriken, die zählen
LCP (Largest Contentful Paint) — Wie schnell das größte sichtbare Element lädt. Meistens ist das ein Bild. Google will das unter 2,5 Sekunden.
CLS (Cumulative Layout Shift) — Wie sehr Elemente während des Ladens herumspringen. Bilder ohne definierte Abmessungen sind eine Hauptursache. Ziel: unter 0,1.
INP (Interaction to Next Paint) — Wie schnell die Seite auf Benutzeraktionen reagiert. Schwere Bilder können den Hauptthread blockieren und Interaktionen verzögern. Ziel: unter 200ms.
Die Auswirkungen sind real
Was passiert, wenn du Bilder auf einer typischen Content-Seite optimierst:
| Metrik | Vor Optimierung | Nach Optimierung | |--------|----------------|-----------------| | Seitengewicht | 4,2 MB | 890 KB | | LCP | 4,8 Sekunden | 1,6 Sekunden | | CLS | 0,25 | 0,02 | | Ladezeit (3G) | 18 Sekunden | 4 Sekunden |
Das ist nicht geschönt. Diese Zahlen stammen von echten Seiten, an denen ich gearbeitet habe. Die Korrekturen sind nicht kompliziert — sie brauchen nur ein bisschen Absicht.
Schritt 1: Richtige Größe, richtiges Format
Der größte Gewinn ist, Bilder in der richtigen Größe auszuliefern. Ein 3000px breites Hero-Bild, das bei 1200px angezeigt wird, sendet 6x mehr Pixel als nötig.
Verkleinere deine Bilder auf ihre Anzeigegröße. Für Retina-Displays nimm 2x — wenn ein Bild bei 600px angezeigt wird, mach es 1200px.
Dann wähle das richtige Format:
- WebP — 25-35% kleiner als JPEG bei gleicher Qualität. Verwende es als Standard.
- AVIF — Noch kleiner als WebP, aber Encoding ist langsamer und Browser-Support holt auf.
- JPEG — Universeller Fallback. Für Fotos immer noch in Ordnung, wenn WebP keine Option ist.
- PNG — Nur für Bilder, die Transparenz brauchen und nicht WebP verwenden können.
- SVG — Für Icons, Logos und einfache Illustrationen. Winzige Dateigröße, unendliche Skalierung.
Schritt 2: Aggressiv komprimieren
Die meisten Bilder haben mehr Qualität als Bildschirme anzeigen können. Du kannst ein JPEG auf Qualität 80 komprimieren und niemand wird den Unterschied bemerken — aber die Datei wird 40-60% kleiner sein.
Ein grober Leitfaden:
| Qualitätsstufe | Anwendungsfall | Typische Einsparung | |----------------|---------------|---------------------| | 90-100 | Fotografie-Portfolios | 10-20% | | 75-85 | Allgemeine Web-Bilder | 40-60% | | 60-75 | Thumbnails, Hintergründe | 60-80% |
Rate nicht bei Qualitätsstufen. Komprimiere, dann schau dir das Ergebnis an. Wenn du den Unterschied nicht erkennst, ist die Komprimierung in Ordnung.
Schritt 3: Layout-Shift beheben
Jedes Bild auf deiner Seite sollte explizite width- und height-Attribute haben oder CSS aspect-ratio verwenden. Ohne diese weiß der Browser nicht, wie viel Platz er reservieren soll, und Inhalte springen herum, wenn Bilder laden.
<!-- Gut: Browser kennt den benötigten Platz -->
<img src="photo.webp" width="800" height="600" alt="Beschreibung" />
<!-- Auch gut: CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="Beschreibung" />
Allein das kann deinen CLS von durchgefallen zu bestanden bringen.
Schritt 4: Below-the-Fold-Bilder lazy laden
Wenn ein Bild beim ersten Laden der Seite nicht sichtbar ist, lade es erst, wenn der Nutzer dorthin scrollt.
<img src="photo.webp" loading="lazy" alt="Beschreibung" />
Ein Attribut. Das war's. Aber lade dein Hero-Bild oder LCP-Element nicht lazy — das muss sofort laden.
Schritt 5: Responsive Bilder verwenden
Liefere verschiedene Größen für verschiedene Bildschirmbreiten. Ein Handy braucht kein 1400px-Bild.
<img
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="photo-800.webp"
alt="Beschreibung"
/>
Ja, das bedeutet mehrere Größen zu generieren. Aber die Bandbreiteneinsparung auf Mobilgeräten ist erheblich.
SVGs: Die oft übersehene Optimierung
Wenn du Icons oder Logos als PNGs hast, konvertiere sie zu SVG. Ein 50KB PNG-Icon wird ein 3KB SVG, das bei jeder Größe perfekt aussieht.
Auch bestehende SVGs können in der Regel optimiert werden. Die meisten Design-Tools exportieren SVGs mit zusätzlichen Metadaten, unnötiger Präzision und versteckten Ebenen. Durch einen Optimizer laufen lassen reduziert die Dateigröße typischerweise um 30-60%.
Optimiere deine SVGs, um die letzten Bytes herauszuquetschen.
Schnelle Audit-Checkliste
Gehe das für jede Seite durch, die du optimieren willst:
- Zuerst messen — Lighthouse oder PageSpeed Insights für aktuelle Werte nutzen
- Bildgrößen prüfen — Sind Bilder breiter als ihre Anzeigegröße?
- Formate prüfen — Verwendest du WebP wo möglich?
- Komprimierung prüfen — Bilder durch einen Kompressor laufen lassen
- Abmessungen prüfen — Hat jedes
<img>width und height? - Lazy Loading prüfen — Werden Below-the-Fold-Bilder lazy geladen?
- Nochmal messen — Neue Werte vergleichen
Bildoptimierung ist keine glamouröse Arbeit, aber es ist die wirkungsvollste Performance-Verbesserung, die du machen kannst. Die meisten Seiten können ihre Ladezeit halbieren, indem sie richtig dimensionierte, komprimierte Bilder in modernen Formaten ausliefern. Fang mit deinen schwersten Seiten an und arbeite dich von dort vor.