Bilder sind der größte Performance-Hebel auf den meisten Websites. Eine 2 MB große Hero-Aufnahme kann eine sonst schnelle Seite ausbremsen. Hier die Werkzeuge und Techniken, die wirklich helfen.
Moderne Bildformate
- WebP: deutlich kleiner als JPG bei gleicher Qualität, von allen modernen Browsern unterstützt.
- AVIF: nochmal kleiner, neueste Browser unterstützen es, ältere fallen auf WebP/JPG zurück.
- JPG: bewährt für Fotos, mit korrekter Kompression noch immer akzeptabel.
- PNG: nur für transparente Grafiken oder Screenshots verwenden.
- SVG: für Logos, Icons, einfache Grafiken – skaliert verlustfrei.
Responsive Images mit srcset
Statt ein einziges großes Bild zu laden, mehrere Größen anbieten und Browser wählen lassen:
- srcset mit verschiedenen Breiten (480w, 720w, 960w, 1280w).
- sizes-Attribut, das die Anzeigebreite je Viewport beschreibt.
- picture-Element für komplette Format-Wechsel (z. B. AVIF + WebP + JPG-Fallback).
- fetchpriority="high" für LCP-Kandidaten, "low" oder Default für unwichtige Bilder.
Lazy Loading
Bilder unterhalb des Folds erst laden, wenn der Nutzer dorthin scrollt. Im modernen HTML einfach: loading="lazy" als Attribut. Spart messbar Bandbreite und beschleunigt LCP.
- loading="lazy" für alle Bilder, die nicht oberhalb des Folds sind.
- loading="eager" für Hero-Bilder oder LCP-Kandidaten (Default-Verhalten).
- decoding="async" für nicht-kritische Bilder.
Tools zur Optimierung
- Squoosh.app: kostenloses Browser-Tool von Google, sehr gut für Einzelbilder.
- TinyPNG: einfache Online-Kompression für JPG und PNG.
- ImageOptim (macOS): batch-fähig, kostenlos.
- Sharp (Node.js): programmatische Bildbearbeitung in eigenen Workflows.
- Imagick / ImageMagick: Server-Tool für automatisierte Pipelines.
- CDN-Bildoptimierung: Cloudflare Polish, Imgix, Cloudinary – on-the-fly Optimierung.
Häufige Fehler
- 5000×3000 Pixel großes Foto auf 600 Pixel Anzeige geladen – Bandbreite verschwendet.
- PNG für Fotos verwendet (5x größer als JPG).
- Lazy Loading auf Hero-Bildern (LCP wird schlechter).
- Bilder ohne width/height – verursacht Layout Shifts (CLS).
- Bilder ohne Alt-Text – Accessibility-Verstoß und SEO-Verlust.