Bildoptimierung

Definition: Bildoptimierung bezeichnet alle technischen Maßnahmen, um Bilder für das Web so zu verkleinern und anzupassen, dass sie möglichst schnell laden, ohne dabei sichtbar an Qualität zu verlieren. Dazu gehören die Wahl des richtigen Dateiformats, verlustbehaftete und verlustfreie Komprimierung, pixelgenaue Skalierung, Responsive Images mit dem srcset-Attribut und die Aktivierung von Lazy Loading. Bilder machen auf den meisten Webseiten 50–70 % des gesamten Seitengewichts aus – Bildoptimierung ist daher der wirksamste einzelne Hebel zur Verbesserung der Ladezeit und des Largest Contentful Paint (LCP).

Erläuterung

Das häufigste Optimierungsproblem: Bilder werden in Originalgröße (3–5 MB JPEG oder PNG von Digitalkameras) ohne Konvertierung direkt ins CMS hochgeladen. Der Browser lädt dann 4 MB für ein Bild das auf Mobilgeräten mit 400 px Breite dargestellt wird. Automatisierte Bildoptimierungs-Pipelines (CDN oder Build-Tool) lösen dieses Problem ohne manuellen Aufwand.

Dateiformate im Vergleich

• WebP: Google-Format (2010); 25–35 % kleiner als JPEG bei gleicher visueller Qualität; unterstützt Transparenz (wie PNG) und Animation (wie GIF); Browser-Unterstützung 2024: > 95 % (alle modernen Browser); empfohlenes Standard-Format für Fotos und Grafiken; AVIF bevorzugen wenn Browser-Support vorhanden
• AVIF: Neuestes Format (2020, basiert auf AV1-Video); 50 % kleiner als JPEG; beste Komprimierungsrate verfügbar; Browser-Support 2024: ~90 % (Chrome, Firefox, Safari 16+); für kritische LCP-Bilder bevorzugen wenn Support ausreichend; picture-Element für AVIF mit WebP-Fallback
• JPEG/JPG: Standard für Fotos; verlustbehaftet; gute Browser-Kompatibilität; Qualitätsstufe 75–85 % bietet gutes Qualitäts-Dateigröße-Verhältnis; Progressive JPEG für bessere wahrgenommene Ladezeit; durch WebP/AVIF weitgehend ersetzbar
• PNG: Verlustfrei; für Grafiken mit scharfen Kanten, Text und Transparenz; größer als JPEG für Fotos; PNG-8 für Grafiken mit wenigen Farben; durch WebP bei Fotos und SVG bei Vektorgrafiken oft ersetzbar
• SVG: Vektorformat für Logos, Icons und Illustrationen; skaliert verlustfrei auf jede Größe; kann inline im HTML oder als externe Datei eingebunden werden; SVGO für Komprimierung von SVG-Dateien

Komprimierung und Qualitätseinstellungen

• Verlustbehaftete Komprimierung: Reduziert Dateigröße durch Weglassen von für das menschliche Auge schwer wahrnehmbaren Details; JPEG Qualität 75–85: guter Sweet-Spot; WebP Qualität 75–85 erzeugt kleinere Dateien bei ähnlicher Qualität; Squoosh.app für visuellen Qualitäts-Vergleich
• Verlustfreie Komprimierung: Keine Qualitätsverluste; kleinere Einsparungen als verlustbehaftet; geeignet für PNG und GIF; OptiPNG, pngquant für PNG; Gifsicle für GIF; automatisch in modernen Build-Tools integriert
• Optimierungstools: Squoosh (Google): Browser-basiert, visueller Vergleich, alle Formate; ImageOptim (macOS): Batch-Optimierung mit Drag & Drop; Sharp (Node.js): Hochperformante Bildoptimierung für Server-Side-Pipelines; Cloudinary und imgix: CDN mit automatischer Formatkonvertierung und Größenanpassung via URL-Parameter

Responsive Images und srcset

• srcset-Attribut: Gibt dem Browser mehrere Bildgrößen zur Auswahl; Browser wählt die passende Größe basierend auf Viewport-Breite und Bildschirm-Pixeldichte; Syntax: <img srcset="bild-400w.jpg 400w, bild-800w.jpg 800w, bild-1200w.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" src="bild-800w.jpg">
• picture-Element: Ermöglicht Art Direction (unterschiedliche Bildausschnitte für verschiedene Viewports) und Format-Fallbacks; <picture><source type="image/avif" srcset="bild.avif"><source type="image/webp" srcset="bild.webp"><img src="bild.jpg"></picture>; Browser wählt erstes unterstütztes Format
• width und height Attribute: Immer setzen um Cumulative Layout Shift (CLS) zu vermeiden; Browser reserviert Platz für Bild bevor es geladen ist; CSS aspect-ratio als moderne Alternative; CLS-Optimierung direkt verknüpft mit Core Web Vitals und Google-Ranking

Lazy Loading und Priorisierung

• Lazy Loading: loading="lazy" Attribut verzögert Laden von Bildern außerhalb des Viewports; nativ im Browser ohne JavaScript; Einschränkung: erstes sichtbares Bild (LCP-Kandidat) NICHT lazy laden – sonst verschlechtert sich LCP; loading="eager" (Default) oder fetchpriority="high" für LCP-Bilder
• LCP-Bild priorisieren: fetchpriority="high" für das Bild das als LCP-Element dienen wird; <link rel="preload" as="image"> im Head für kritische Bilder über dem Fold; Google PageSpeed Insights identifiziert das LCP-Element und gibt Hinweise auf fehlende Priorisierung

Automatisierte Bildoptimierung

• CDN mit Bildoptimierung: Cloudinary, imgix, Fastly Image Optimizer, AWS CloudFront + Lambda@Edge; konvertieren und skalieren Bilder automatisch via URL-Parameter (z. B. ?w=800&f=webp&q=80); keine manuellen Build-Schritte; optimal für CMS ohne Build-Prozess
• Next.js Image Component: Automatische WebP-Konvertierung, Größenanpassung, Lazy Loading und LCP-Optimierung; <Image> statt <img>; Qualitäts-Standard in modernem React-Ökosystem; ähnliche Lösungen in Nuxt.js (nuxt/image) und Astro