Bildoptimierung reduziert Dateigrößen bei gleichbleibender visueller Qualität. Der Kern-Workflow: Größe auf Anzeigedimensionen anpassen, mit 75-85% Qualität komprimieren, in WebP oder AVIF konvertieren, Lazy Loading hinzufügen und explizite width/height-Attribute setzen. Eine DebugBear-Fallstudie erreichte eine Reduktion von 97,5% (4,3 MB → 109 KB) mit genau dieser Reihenfolge.
Warum Bildoptimierung wichtig ist
Bilder machen etwa 64% des gesamten Seitengewichts aus (Sanity). Nicht optimierte Bilder wirken sich direkt negativ auf Folgendes aus:
| Kennzahl | Auswirkung | Ursache |
|---|---|---|
| LCP (Largest Contentful Paint) | Überschreitung des 2,5-Sekunden-Schwellenwerts | Überdimensionierte Hero-Bilder |
| CLS (Cumulative Layout Shift) | Inhalt springt beim Laden | Fehlende width/height-Attribute |
| Bounce-Rate | Besucher verlassen die Seite vor dem vollständigen Laden | Langsamer erster Bildaufbau |
| Mobiles Ranking | Niedrigere Suchposition | Hoher Bandbreitenverbrauch bei schwankenden Netzwerken |
Die drei Säulen: Skalierung, Kompression, Format
Säule 1: Skalierung — der größte Einzelerfolg
Bilder in ihrer tatsächlichen Anzeigegröße bereitzustellen, ist die wirkungsvollste Optimierung. Die DebugBear-Fallstudie zeigt ein Foto mit 7108×4744 Pixeln, angezeigt bei 1266×845: Allein die Skalierung reduzierte die Datei von 4,3 MB auf 495 KB (89% Reduktion).
Schritte:
- Anzeigedimensionen bestimmen — WordPress.com empfiehlt, Bilder mit der 1,5- bis 2-fachen Breite des Inhaltsbereichs hochzuladen, für ein scharfes Ergebnis.
- Vor dem Hochladen skalieren — Vorschau (Mac), Paint (Windows) oder GIMP verwenden.
- Responsive Bilder mit
srcset– undsizes-Attributen hinzufügen, um verschiedene Breiten (400w, 800w, 1600w) je nach Viewport-Größe bereitzustellen.
Dadurch kann der Browser die passende Datei für jeden Viewport auswählen — mobile Nutzer laden kleinere Dateien, Desktop-Nutzer erhalten scharfe Versionen.
Säule 2: Kompression — verlustbehaftet vs. verlustfrei
| Modus | Funktionsweise | Dateigröße | Am besten für |
|---|---|---|---|
| Verlustbehaftet | Entfernt dauerhaft einen Teil der Daten | Kleiner (40-60% Reduktion) | Fotos, komplexe Bilder |
| Verlustfrei | Erhält alle Daten exakt | Größer | Logos, Text, Screenshots, Transparenz |
Für die meisten Web-Bilder bietet verlustbehaftete Kompression bei einer Qualität von 75-85 das optimale Gleichgewicht. Sowohl WebP als auch AVIF unterstützen beide Modi.
Säule 3: Formatauswahl — WebP vs. AVIF vs. JPEG
| Format | Kompression vs. JPEG | Kodierungsgeschwindigkeit | Browser-Unterstützung (2026) | Am besten für |
|---|---|---|---|---|
| WebP | 25-35% kleiner | Schnell | 97%+ | LCP-Bilder, allgemeine Nutzung |
| AVIF | ~50% kleiner | 50% langsamer als WebP | 92%+ | Maximale Kompression |
| JPEG | Baseline | Am schnellsten | 100% | Universeller Fallback |
Entscheidungsrahmen:
| Szenario | Empfohlenes Format |
|---|---|
| LCP/Above-the-fold Hero-Bild | WebP (schnellere Kodierung, breitere Unterstützung) |
| Reduktion des gesamten Seitengewichts | AVIF (bessere Kompression) |
| Produktfotografie (HDR) | AVIF (breiter Farbraum) |
| Nutzergenerierte Inhalte | WebP (schnellere Verarbeitung) |
| Animierte Grafiken | WebP (Animations-Unterstützung) |
| Grafiken mit Text/scharfen Linien | WebP verlustfrei |
Hybrider Ansatz (empfohlen): Gemäß Framer WebP bei der ersten Anfrage ausliefern, im Hintergrund zu AVIF konvertieren, dann AVIF bei folgenden Besuchen ausliefern. So erhalten Sie eine schnelle Erstzustellung und kleinere zwischengespeicherte Dateien.
Lazy Loading und responsive Bilder
Lazy Loading verzögert Offscreen-Bilder, bis sie benötigt werden, spart Bandbreite und verbessert das anfängliche Laden. Fügen Sie loading="lazy" zu jedem Below-the-fold-Bild-Tag hinzu.
Regeln:
- Niemals Above-the-fold-Bilder per Lazy Loading laden — dies verzögert den LCP.
- LCP-Bilder priorisieren mit
fetchpriority="high". -
Kritische CSS-Hintergrundbilder vorladen im
<head>mitrel="preload" as="image" fetchpriority="high". -
Immer explizite width- und height-Attribute setzen bei Bildelementen, um CLS zu vermeiden.
Tool-Vergleich
| Tool | Am besten für | Formate | Stapelverarbeitung | Kosten |
|---|---|---|---|---|
| Squoosh | Formatvergleich für Entwickler | WebP, AVIF, JPEG, PNG | Ja | Kostenlos |
| TinyPNG | Einzelbild-Optimierung für Designer | WebP, JPEG, PNG | 20 Dateien | Kostenlos |
| ImageLean | Privatsphäre-fokussierte Browser-Kompression | WebP, AVIF, JPEG, PNG | Ja | Kostenlos |
| Smush | WordPress-Website-Betreiber | WebP, AVIF, JPEG, PNG | Massenverarbeitung | Kostenlos/Pro |
| Cloudflare Images | Globale Skalierung über CDN | Auto-Konvertierung | On-the-fly | Nutzungsbasiert |
| Next.js Image | React/Next.js-Projekte | Auto WebP/AVIF | Automatisch | Kostenlos |
CDN- vs. Plugin-Optimierung
| Ansatz | Funktionsweise | Vorteile | Nachteile |
|---|---|---|---|
| CDN-basiert (Cloudflare, Fastly) | Optimiert am Netzwerk-Edge, speichert das Ergebnis im Cache | Keine manuelle Arbeit, geräteadaptiv | CDN-Abonnement erforderlich |
| Plugin-basiert (Smush, TinyPNG) | Verarbeitet beim Upload oder über API | Mehr Kontrolle über das Ergebnis | Vorhandene Bilder müssen stapelweise verarbeitet werden |
Bewährte Methode: Hybrid — CDN für On-the-fly-Auslieferung + Plugin für Upload-Kompression. CDNs reduzieren die Bild-Ladezeiten um über 50% für internationale Besucher (DebugBear).
Automatisierungs-Workflows
CI/CD-Pipeline
GitHub Actions kann bei jedem Push automatisch komprimieren und Formate konvertieren, und zwar mit Squoosh CLI oder sharp. Alle Bilder in der Codebasis werden vor dem Deployment optimiert.
Headless-CMS
Plattformen wie Sanity liefern optimierte Bilder mit On-the-fly-Transformationen — eine hochwertige Quelle speichern und automatisch Vorschaubilder, responsive Größen und moderne Formate erhalten.
E-Commerce
- WooCommerce: Smush integriert direkt — Auto-Kompression beim Upload, Massenoptimierung von Galerien, CDN für weltweite Auslieferung.
- Shopify: Die integrierte Pipeline übernimmt die Optimierung. Sicherstellen, dass Quellbilder vor dem Upload korrekt skaliert sind und Themes die richtigen
srcset-Attribute generieren.
PageSpeed Insights Warnungen beheben
| Warnung | Ursache | Lösung |
|---|---|---|
| “Properly size images” | Bild größer als Anzeigegröße | An Container anpassen + srcset verwenden |
| “Serve images in next-gen formats” | JPEG/PNG statt WebP/AVIF | Mit Squoosh oder Smush Auto-Konvertierung konvertieren |
| “Defer offscreen images” | Alle Bilder laden sofort | loading="lazy" nur bei Below-the-fold-Bildern hinzufügen |
| “Eliminate render-blocking resources” | Große Base64-kodierte Bilder in CSS/HTML | Als separate Dateien ausliefern; Base64 nur für wenige hundert Byte vermeiden |
Fazit
Bilder in dieser Reihenfolge optimieren: skalieren → komprimieren → in modernes Format konvertieren → Lazy Loading hinzufügen → explizite Dimensionen setzen. Mit einem CDN/Plugin-Hybrid automatisieren. Beginnen Sie mit einem Audit Ihrer Website mit DebugBear — die Größenreduktion von 97,5% aus der Fallstudie ist mit diesen Techniken für die meisten Websites erreichbar.
FAQ
Was ist der Unterschied zwischen verlustbehafteter und verlustfreier Kompression?
Verlustbehaftete Kompression entfernt dauerhaft Daten für kleinere Dateien — geeignet für Fotos. Verlustfreie Kompression erhält alle Daten exakt — geeignet für Logos, Text und Screenshots. WebP und AVIF unterstützen beide Modi. Für Web-Bilder ist verlustbehaftete Kompression bei 75-85% Qualität der Standard.
Sollte ich 2026 WebP oder AVIF verwenden?
WebP für LCP/Above-the-fold-Bilder (schnellere Kodierung, breitere Unterstützung). AVIF für maximale Kompression (kleinere Dateien, langsamere Kodierung). Den hybriden Ansatz verwenden: WebP beim ersten Laden, AVIF für zwischengespeicherte Folgebesuche.
Wie behebe ich die PageSpeed-Warnungen “Properly size images” und “Next-gen format”?
Bilder auf ihre Anzeigedimensionen skalieren. JPEG/PNG in WebP oder AVIF konvertieren. srcset mit dem <picture>-Element verwenden, um passende Versionen je nach Bildschirmgröße und Format-Unterstützung auszuliefern. WordPress-Nutzer können dies mit dem Smush-Plugin automatisieren.
Schreibe einen Kommentar