Zurück zum Glossar

Begriff

Image Optimization (WebP / AVIF)

Einsatz moderner Bildformate (WebP, AVIF) plus passender Größen und Kompression, um Bilddaten ohne sichtbaren Qualitätsverlust drastisch zu verkleinern.

Image Optimization (WebP / AVIF) — ausführlicher erklärt

Bilder machen auf typischen Websites 50–70 % der Page-Größe aus — entsprechend hebelig ist die Optimierung. WebP (Google, 2010) liefert ~25–35 % kleinere Dateien als JPEG bei gleicher Qualität. AVIF (2019, basiert auf AV1) packt noch mal 30–50 % drauf, ist aber CPU-intensiver beim Encoden.

Voller Hebel entsteht aus drei Schritten: passendes Format (AVIF mit WebP-/JPEG-Fallback via <picture>), passende Maße (responsive srcset für unterschiedliche Viewports), passende Kompression (Quality 70–85 reicht meist optisch). Build-Tools wie astro:assets, next/image oder Cloud-Services (Cloudinary, imgix) automatisieren das.

Beispiel / Praxisbezug

Ein Hero-Bild als 1.4 MB JPEG wird als AVIF auf ~180 kB gebracht — bei identischer optischer Wahrnehmung. LCP verbessert sich auf langsamen Verbindungen um Sekunden.

Abgrenzung zu ähnlichen Begriffen

Image Optimization ist lossy (Bildqualität wird gezielt geopfert); Brotli/Gzip dagegen ist lossless. Lazy Loading ergänzt: Optimierung verkleinert die einzelne Datei, Lazy Loading verzögert das Laden komplett.

Entdecke mehr