Warum Bildoptimierung so wichtig ist
Bilder machen im Durchschnitt 50–70% des Gesamtdatenvolumens einer Webseite aus. Eine einzelne unkomprimierte Foto-DSLR-Aufnahme kann 5–20 MB groß sein — ein katastrophales Gewicht für eine Webseite, die in 1–2 Sekunden laden soll.
Google bewertet Ladezeiten direkt über die Core Web Vitals — besonders LCP (Largest Contentful Paint), der oft vom Hauptbild einer Seite bestimmt wird. Wer hier schlecht abschneidet, verliert Ranking-Positionen und Besucher.
📊 Statistik: Eine 1-Sekunde-Verlangsamung der Ladezeit kostet E-Commerce-Seiten laut Akamai durchschnittlich 7% Conversion-Rate. Bildoptimierung ist oft die günstigste Verbesserung mit dem größten Effekt.
Schritt 1: Das richtige Format wählen
Die Formatwahl ist der erste und wichtigste Schritt:
- Fotos → WebP (oder JPG als Fallback). WebP ist 25–35% kleiner als JPG bei vergleichbarer Qualität.
- Grafiken mit Transparenz → WebP (oder PNG als Fallback). Transparenz ohne den PNG-Overhead.
- Logos, Icons, UI-Elemente → SVG. Vektorgrafiken skalieren perfekt und sind oft nur wenige KB groß.
- Animationen → WebP animated oder Video (MP4). GIF ist extrem ineffizient — ein animiertes WebP ist bis zu 10x kleiner.
Schritt 2: Richtige Auflösung
Ein häufiger Fehler: Bilder in voller Kameraauflösung (4000 × 3000 px) auf einer Webseite zu verwenden, wo sie nur 800 × 600 px groß dargestellt werden. Der Browser muss dann 5× so viele Pixel herunterladen wie nötig.
Faustregel für Bildgrößen:
- Hero-Bilder: max. 1920 × 1080 px (für Retina-Displays ggf. 2x = 3840 × 2160)
- Content-Bilder: Breite entsprechend dem Container, z.B. 800 px für eine 400 px-Spalte auf Retina
- Thumbnails: 200–400 px Breite
- Produkt-Bilder: 600–1200 px, je nach Zoom-Funktion
Schritt 3: Komprimierung anwenden
Selbst in der richtigen Auflösung können Bilder noch stark komprimiert werden ohne sichtbaren Qualitätsverlust:
- JPG/WebP (verlustbehaftet): 75–85% Qualität ist für die meisten Webbilder ideal. Darunter sind Artefakte sichtbar, darüber nimmt die Dateigröße ohne sichtbaren Vorteil zu.
- PNG: Verlustfreie Komprimierung ist der Standard. Tools wie pngquant können durch Farbreduzierung (Quantisierung) zusätzlich 40–60% sparen.
- SVG: Whitespace entfernen, SVGO anwenden.
Schritt 4: Lazy Loading
Bilder, die nicht im sichtbaren Bereich (above the fold) liegen, müssen nicht sofort geladen werden. Das HTML-Attribut loading="lazy" weist den Browser an, Bilder erst zu laden wenn sie in den Viewport kommen:
- Einfach zu implementieren:
<img src="..." loading="lazy" /> - Wird von allen modernen Browsern unterstützt
- Spart auf langen Seiten oft 50–80% des initialen Datenvolumens
- Achtung: Nie für LCP-Bilder (das erste sichtbare Bild) verwenden — diese sollten
loading="eager"oderfetchpriority="high"haben
Schritt 5: Responsive Images
Verschiedene Geräte haben verschiedene Bildschirmgrößen. Das HTML-Attribut srcset erlaubt es, verschiedene Bildgrößen anzubieten und den Browser die passende wählen zu lassen:
- Mobile sieht 400 px-Version, Desktop 1200 px-Version
- Retina-Displays bekommen die 2x-Version
- Keine unnötigen Bytes auf kleinen Bildschirmen
Schritt 6: Caching und CDN
Statische Bilder sollten aggressiv gecached werden. Im HTTP-Header Cache-Control: public, max-age=31536000, immutable bedeutet: Bild für ein Jahr cachen. Mit einem Content Delivery Network (CDN) werden Bilder von Servern ausgeliefert, die nahe beim Benutzer liegen — das reduziert die Latenz.
Praktische Checkliste
| Maßnahme | Aufwand | Effekt |
|---|---|---|
| Format auf WebP umstellen | Niedrig | ⭐⭐⭐⭐ |
| Bilder komprimieren (70–85%) | Niedrig | ⭐⭐⭐⭐ |
| Richtige Auflösung wählen | Niedrig | ⭐⭐⭐⭐⭐ |
| Lazy Loading aktivieren | Sehr niedrig | ⭐⭐⭐ |
| Responsive srcset | Mittel | ⭐⭐⭐ |
| CDN einrichten | Mittel | ⭐⭐⭐ |
| LCP-Bild priorisieren | Niedrig | ⭐⭐⭐⭐ |
Tools für die Bildoptimierung
- JNRT Pixel — Browser-basierte Komprimierung für JPG, PNG, WebP, GIF, SVG
- Squoosh — Google-Tool für tiefgehende Browser-Komprimierung
- ImageOptim — Mac-Desktop-App für verlustfreie Optimierung
- SVGO — CLI-Tool für SVG-Optimierung
- Sharp — Node.js-Bibliothek für serverseitige Bildverarbeitung
- next/image — Next.js-Komponente mit automatischer WebP-Konvertierung und Lazy Loading
Fazit
Bildoptimierung ist eine der effektivsten Maßnahmen für bessere Website-Performance. Die größten Gewinne kommen aus dem richtigen Format (WebP), der richtigen Auflösung und ausreichend Komprimierung. Lazy Loading ist mit einem Attribut aktiviert. Zusammen können diese Maßnahmen die Ladezeit einer durchschnittlichen Website um 50–70% verbessern.