Warum Bildoptimierung wichtig ist
Bilder machen durchschnittlich 50% der Seitengröße aus. Optimierte Bilder bedeuten:
- Schnellere Ladezeiten
- Bessere Core Web Vitals
- Niedrigere Hosting-Kosten
- Bessere User Experience
Bildformate im Vergleich
| Format | Verwendung | Vorteile | Nachteile |
|---|---|---|---|
| WebP | Fotos & Grafiken | 30% kleiner als JPEG | Ältere Browser |
| JPEG | Fotos | Universell | Kein Transparenz |
| PNG | Grafiken, Transparenz | Verlustfrei | Große Dateien |
| SVG | Icons, Logos | Skalierbar | Nicht für Fotos |
| AVIF | Zukunft | 50% kleiner | Noch nicht überall |
WebP: Das beste Format 2025
WebP bietet das beste Verhältnis aus Qualität und Dateigröße:
- 30% kleiner als JPEG bei gleicher Qualität
- Unterstützt Transparenz (wie PNG)
- Unterstützt Animation (wie GIF)
- 97% Browser-Unterstützung
Optimierungs-Checkliste
✅ Richtige Größe
- Nicht größer als nötig (max. 1920px Breite)
- Responsive Images mit srcset
✅ Format wählen
- Fotos: WebP (Fallback JPEG)
- Grafiken mit Transparenz: WebP oder PNG
- Icons/Logos: SVG
✅ Kompression
- Qualität 80-85% für Fotos
- Tools: Squoosh, TinyPNG, ImageOptim
✅ Lazy Loading
- Bilder below-the-fold lazy laden
- Native: loading="lazy"
- Above-the-fold: loading="eager"
✅ Dimensionen angeben
- Immer width und height
- Verhindert Layout Shifts (CLS)
Tools für Bildoptimierung
| Tool | Typ | Preis | Stärken | Am besten für |
|---|---|---|---|---|
| Squoosh.app | Online | Kostenlos | Alle Formate, live-Preview | Einzelbilder |
| TinyPNG | Online | Freemium | Batch, API | PNG/JPEG |
| ImageOptim | Desktop (Mac) | Kostenlos | Schnell, automatisch | Mac-Nutzer |
| ShortPixel | Plugin | €4.99/Monat | WordPress-Integration | WordPress |
| Cloudinary | Cloud | Freemium | CDN, Auto-Optimierung | Enterprise |
| Next.js Image | Framework | Kostenlos | Automatisch, responsive | Next.js Apps |
Typische Dateigrößen-Reduktion
| Ursprung | Format | Kompression | Ergebnis | Ersparnis |
|---|---|---|---|---|
| 500 KB JPEG | WebP | 85% | 150 KB | 70% |
| 300 KB PNG | WebP | Verlustfrei | 120 KB | 60% |
| 2 MB Foto | JPEG | 80% | 200 KB | 90% |
| 100 KB Icon | SVG | Optimiert | 10 KB | 90% |
Next.js Image Best Practice
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Beschreibender Alt-Text"
width={1200}
height={630}
priority // für above-the-fold
quality={85}
/>
Fazit
Bildoptimierung ist einer der einfachsten Wege, Ihre Website schneller zu machen. Nutzen Sie WebP, komprimieren Sie richtig und implementieren Sie Lazy Loading – Ihre Nutzer und Google werden es Ihnen danken.