1. Entscheidungsbaum
- Vektor / Logo → SVG.
- Foto → AVIF (Fallback WebP/JPEG).
- UI mit Alpha → PNG (oder WebP lossless).
- Icons → SVG oder WebP.
2. Vergleich
| Format | Vorteile | Nachteile |
|---|---|---|
| JPEG | Breite Unterstützung | Kein Alpha |
| PNG | Lossless, Transparenz | Größer bei Fotos |
| WebP | Lossy/Lossless + Alpha | Ältere Browser |
| AVIF | Sehr hohe Kompression | Langsame Kodierung |
| SVG | Skalierbar | Komplexität kann Größe erhöhen |
3. Fallback
<picture> mit AVIF → WebP → JPEG/PNG bereitstellen.
4. Automatisierung
- Mehrere Breiten.
- Metadata strippen.
- Cache-Busting Hash.
5. Häufige Fehler
- PNG für Fotos.
- Unoptimiertes SVG.
- Kein Fallback.