Die komplette Bildoptimierungs-Pipeline

Der Designer übergibt ein 4000x3000 PNG direkt aus Photoshop. 8 MB. Die Webseite braucht es mit 800px Breite, unter 100 KB, idealerweise im WebP-Format.

Die Lücke zwischen "was man hat" und "was das Web braucht" — hier verschwenden die meisten Entwickler ihre Zeit. Lösen wir das mit einer ordentlichen Pipeline.

Schritt 1: Auf Zielmaße skalieren

Die größte Dateigrößenreduzierung kommt durch Skalierung. Ein 4000px breites Bild, das bei 800px angezeigt wird, verschwendet 96% seiner Pixel. Das ist keine Übertreibung — das ist Mathematik.

Für Retina-Displays: 2x der Anzeigegröße. Wenn das Bild bei 400px dargestellt wird, auf 800px skalieren. Nicht 4000px.

Typische Einsparung: 4000x3000 (8 MB) → 800x600 (400 KB). 95% Reduktion nur durch Skalierung.

Schritt 2: Komprimieren ohne sichtbaren Qualitätsverlust

Nach dem Skalieren: komprimieren. Bei Fotos ist JPEG-Qualität zwischen 75-85% der Sweet Spot — visuell identisch zum Original, deutlich kleinere Datei.

Der Trick ist, die Schwelle zu finden, ab der Kompressionsartefakte sichtbar werden. Bei den meisten Fotos liegt das bei etwa 70%. Darüber merkt niemand einen Unterschied — es sei denn, man zoomt hinein.

Typische Einsparung: 400 KB → 120 KB bei 80% Qualität. Die Augen der Nutzer bemerken nichts. Ihre Ladezeiten schon.

Schritt 3: In moderne Formate konvertieren

JPEG und PNG gibt es schon ewig. WebP liefert 25-35% kleinere Dateien bei gleicher Qualität. AVIF geht noch weiter.

Der praktische Ansatz:

• Fotos: Zu WebP (breite Unterstützung) oder AVIF (beste Kompression)
• Screenshots/Grafiken: WebP oder PNG je nach Transparenzbedarf
• Icons/Logos: Wenn möglich als SVG beibehalten

<picture>-Elemente nutzen, um WebP mit JPEG-Fallback zu liefern. Browser-Support für WebP liegt über 97%, aber Fallbacks kosten nichts.

Schritt 4: SVGs optimieren

SVG-Dateien aus Design-Tools enthalten viel Ballast — Editor-Metadaten, unnötige Dezimalstellen, redundante Gruppen, unsichtbare Elemente. Ein typisches Illustrator-SVG hat 30-50% Overhead.

Durch den SVG-Optimierer laufen lassen und die Dateigrößen fallen drastisch. Ein 15 KB Icon wird zu 5 KB. Bei 20 Icons auf der Seite spart man 200 KB Markup.

Schritt 5: Base64 für winzige Assets

Sehr kleine Bilder (unter 2 KB) — Icons, Aufzählungszeichen, kleine Dekorelemente — können als Base64 konvertiert und inline eingebettet werden. Das eliminiert einen HTTP-Request komplett.

Ein Request weniger > etwas größere HTML-Datei. Aber nur für kleine Bilder. Ein 50 KB Base64-String im CSS ist schlechter als ein separater Request.

Faustregel: Unter 2 KB? Base64. Über 2 KB? Separate Datei.

Echte Zahlen: Eine Fallstudie

Ausgangspunkt: 12 Produktbilder auf einer Kategorieseite.

| Phase | Gesamtgröße | Einsparung | |-------|-------------|------------| | Original-PNGs | 45 MB | — | | Nach Skalierung (800px) | 2,1 MB | 95,3% | | Nach Kompression (80%) | 680 KB | 98,5% | | Nach WebP-Konvertierung | 450 KB | 99,0% |

Von 45 MB auf 450 KB. Gleiche visuelle Qualität. Die Seite lädt in 1,2 Sekunden statt 12.

Die Pipeline in der Praxis

Bei einer Bilderserie wird der Workflow mechanisch:

1. Skalieren — auf Zielmaße anpassen
2. Komprimieren — mit passenden Qualitätseinstellungen
3. Konvertieren — zu WebP/AVIF
4. Optimieren — SVG-Assets
5. Base64-Encoding — für winzige Icons

Nach dreimal Durchführen dauert es fünf Minuten für eine ganze Seite an Bildern.

Nicht vergessen: Lazy Loading

Optimierung hört nicht bei der Dateigröße auf. Bildern unterhalb des sichtbaren Bereichs loading="lazy" hinzufügen. Der Browser lädt sie erst, wenn der Nutzer in die Nähe scrollt. Kostenlose Performance.

---

Bildoptimierung ist nicht glamourös. Niemand schreibt begeistert darüber, JPEGs zu komprimieren. Aber es ist die einzelne wirkungsvollste Performance-Verbesserung, die die meisten Websites vornehmen können. Kleinere Bilder bedeuten schnellere Seiten, zufriedenere Nutzer und niedrigere Bandbreitenkosten. Jedes Bild durch die Pipeline schicken, bevor es in Produktion geht.