Bildoptimierung: AVIF/Next Image Best Practices + Checklist
90% weniger Payload ohne Qualitätsverlust: AVIF/WebP, SrcSet/Sizes, Lazy/ Priority und CDN-Transforms – kompakt als Checklist.
18. Dezember 20251 Min. LesezeitLucas Kleipoedszus
Bildoptimierung: AVIF/Next Image Best Practices + Checklist
90% weniger Payload ohne Qualitätsverlust. Diese Checklist passt für WP, Next.js und statische Sites.
Formate & Fallbacks
- Primär AVIF, Fallback WebP/JPG.
- Keine PNGs für Fotos; PNG nur für Grafiken mit Transparenz.
- Metadaten strippen, Farbprofil vereinheitlichen (sRGB).
Responsive Setup
- Saubere
srcset+sizesje Breakpoint. - Intrinsic Dimensions angeben, damit kein CLS entsteht.
- Above-the-fold:
priority(Next) bzw. kein Lazy. - Below-the-fold:
loading="lazy".
Delivery & Cache
- CDN-Transforms aktivieren (Größe/Format on the fly).
- Cache-Control für Bilder: 1y, Immutable.
- GZIP/Brotli aktiv.
Workflow
- Upload-Guard: Max-Width, Kompression, Format-Konvertierung automatisieren.
- Media Audit quartalsweise: große Assets ersetzen.
Core Web Vitals Fokus
- LCP-Element als erstes optimieren.
- Vermeide Layout-Shift: Breite/Höhe setzen, Platzhalter nutzen.
- Prüfe Field Data (CrUX) statt nur Lab.
CTA
Button: „Bild-Checklist laden“ – enthält Prüfpunkte und empfohlene Defaults.