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 + sizes je 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.