Was sind AVIF und WebP im Vergleich?

AVIF (AV1 Image File Format) und WebP sind zwei moderne Raster-Bildformate, die deutlich besser komprimieren als JPEG und PNG. WebP wurde im September 2010 von Google veröffentlicht, basierend auf dem VP8-Video-Codec, und erreichte 100 Prozent moderne Browser-Unterstützung, nachdem Safari es in iOS 14 (September 2020) ergänzte. AVIF wurde im Februar 2019 von der Alliance for Open Media standardisiert, basierend auf dem AV1-Video-Codec, und erreichte breite Browser-Unterstützung, als Safari 16 im September 2022 nachzog. AVIF komprimiert Fotos rund 20 bis 30 Prozent kleiner als WebP bei gleicher Bildqualität und 50 Prozent kleiner als JPEG, während WebP 25 bis 35 Prozent kleiner als JPEG ist. Beide unterstützen Transparenz (Alpha-Kanal), Animation und verlustfreie Kompression. AVIF unterstützt zusätzlich HDR (High Dynamic Range), 10- und 12-Bit-Farbtiefe und weiten Farbraum. WebP-Encoding ist 10 bis 20 mal schneller als AVIF, was bei Seiten, die viele Bilder beim Upload skalieren, weiterhin relevant ist. Ein typisches Produktfoto ist als JPEG vielleicht 180 KB, als WebP 110 KB und als AVIF 75 KB bei gleicher Qualität.

Wie groß ist der Größenunterschied in der Praxis?

Cloudinary Image Format Report 2023 und unabhängige Benchmarks von Jake Archibald (Google) zeigen folgende typische Einsparungen bei gleichem SSIMULACRA2-Score:

Bei Grafiken, Logos, Icons und Screenshots (Flächen einheitlicher Farbe) ist der Vorsprung noch größer. AVIF Lossless kann 30 bis 50 Prozent kleiner als PNG sein, WebP Lossless ist 20 bis 30 Prozent kleiner als PNG.

Wie sieht die Browser-Unterstützung aus?

Beide Formate sind heute mit Fallback-Kette produktionsreif.

Wie liefere ich AVIF mit WebP-Fallback aus?

Das HTML-<picture>-Element nutzen. Der Browser wählt die erste <source>, die er unterstützt, und fällt auf das innere <img> zurück:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Produktfoto" width="1200" height="800" loading="lazy">
</picture>

Für Responsive Images mehrere Breiten in jeder source angeben:

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
    sizes="(max-width: 800px) 100vw, 1200px">
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 800px) 100vw, 1200px">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 800px) 100vw, 1200px"
    alt="Produktfoto"
    width="1200" height="800"
    loading="lazy" decoding="async">
</picture>

Wie wandle ich Bilder in AVIF und WebP um?

• Kommandozeile: cwebp (libwebp) und avifenc (libavif), beide via brew, apt, yum verfügbar.

  cwebp -q 80 hero.jpg -o hero.webp
  avifenc --min 25 --max 35 hero.jpg hero.avif

• Sharp (Node.js): Standard-Bildbibliothek für Next.js, Astro, Gatsby. Beide Formate eingebaut.
• ImageMagick (convert): convert hero.jpg -quality 80 hero.webp. AVIF seit ImageMagick 7.0.25 (2020).
• Squoosh (squoosh.app): kostenlose Web-App von Google für einzelne Konvertierungen, läuft komplett im Browser.
• libvips: sehr schnelle Bildbibliothek in vielen CMS-Pipelines.
• CDN-On-the-Fly-Konvertierung: Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, Statically liefern AVIF oder WebP basierend auf dem Accept-Header der Anfrage.

Wie behandelt WordPress AVIF und WebP?

WordPress 5.8 (Juli 2021) brachte WebP-Upload in die Mediathek. WordPress 6.5 (April 2024) brachte AVIF-Upload. Direkter Upload braucht die passenden Bibliotheken:

• WebP benötigt GD mit WebP (PHP 7.1+ mit libwebp) oder Imagick mit libwebp. Moderne Hoster bieten das.
• AVIF benötigt Imagick 7.0.25 oder neuer mit libheif und libavif (oder GD mit AVIF in PHP 8.1+). Manche Shared Hoster fehlen das 2025 noch.

Plugins für automatische Konvertierung bestehender JPEG und PNG:

• ShortPixel: kostenpflichtig, konvertiert in der Cloud, integriert mit dem picture-Element.
• EWWW Image Optimizer: kostenlos + bezahlt.
• Imagify von WP Media: kostenpflichtig, vom WP-Rocket-Team.
• Smush von WPMU DEV: kostenlos + bezahlt.
• Converter for Media (früher WebP Converter for Media): kostenlos, WebP und AVIF ohne Quota.
• Optimole: Cloud-CDN, liefert AVIF oder WebP nach Browser.

Cloudflare Polish (kostenpflichtiges Cloudflare-Feature) und Cloudflare Images konvertieren und cachen automatisch am Edge ohne Plugin.

Wann AVIF, wann WebP?

• AVIF für Hero-Bilder, große Produktfotos, Kampagnenvisuals, wo jedes Kilobyte zählt. Zur Build-Zeit erzeugen, nicht on-the-fly.
• WebP für den Long Tail an Content-Bildern, User-Uploads, Thumbnails. Encoding ist schnell genug für den Request-Pfad.
• Beide via <picture>: AVIF für Browser, die es können (94 Prozent), WebP für den Rest (3 Prozent), JPEG für einige Legacy-Clients.
• AVIF auslassen bei kleinen Icons unter 5 KB. Header-Overhead macht sie schnell größer als WebP oder PNG.
• Keines für SVG (bereits Vektor) und animierte GIFs (besser MP4 oder echte Videoformate).

Was ist mit JPEG XL und HEIC?

• JPEG XL (ISO/IEC 18181, 2022) komprimiert vergleichbar zu AVIF und encodiert/decodiert schneller. Chrome entfernte JPEG XL 2023 wegen geringer Nachfrage. Safari 17 (September 2023) brachte es. Firefox unter Flag. Stand 2025 vor allem Safari-Only im Web.
• HEIC / HEIF: Apple-proprietär, iPhone-Kamera-Standard. Nicht von Chrome oder Firefox im Web unterstützt. HEIC vor Veröffentlichung in AVIF oder WebP umwandeln.

Hat AVIF Nachteile?

• Langsames Encoding: ein 4K-AVIF kann bei hoher Qualität 5 bis 30 Sekunden brauchen. Niedrigere Effort-Stufen (--speed 6 bis --speed 8) für Batch.
• CPU-Decoding: AVIF-Decoding ist auf schwachen Mobilgeräten schwerer als WebP, Unterschied klein bei modernen Phones.
• Animation: Animated AVIF funktioniert, Tooling ist weniger reif als bei Animated WebP.
• E-Mail-Clients: AVIF-Support in E-Mail-Clients ist noch selten. In Newslettern WebP oder JPEG verwenden.
• Open Graph und Social Previews: Facebook, LinkedIn, X rendern AVIF-Karten oft nicht. JPEG oder PNG für og:image und twitter:image bereitstellen.

Wie hilft InspectWP bei AVIF und WebP?

InspectWP analysiert jedes Bild der gecrawlten Seite und meldet Format, Dateigröße und ob ein modernes Format Bandbreite sparen würde. Bilder, die als AVIF oder WebP ausgeliefert werden könnten, werden im Performance-Bereich markiert.