Zum Inhalt springen
Lexiik
cdn

WebP vs AVIF : Leitfaden für moderne Bildformate

Zuletzt aktualisiert : 8 février 2026

WebP und AVIF sind die Bildformate der nächsten Generation, die das Gewicht im Vergleich zu JPEG/PNG um 50 bis 70 % reduzieren. Erfahren Sie, welches Format für Ihren Online-Shop geeignet ist und wie das Lexiik CDN diese automatisch verwaltet.

Typische Einsparungen

Migration JPEG → WebP: -30 bis -50 % Dateigröße
Migration WebP → AVIF: -20 bis -30 % zusätzlich

Das Problem der herkömmlichen Formate

JPEG, PNG, GIF : Veraltet im Jahr 2026

Diese Formate wurden in den 1990er bis 2000er Jahren entwickelt, als Internetverbindungen langsam und Bildschirmauflösungen gering waren. Sie sind für das moderne Web nicht mehr geeignet.

FormatJahrKomprimierungHauptproblem
JPEG1992LossyÜbermäßige Dateigröße, keine Transparenz
PNG1996LosslessSehr große Dateien (3-10x JPEG)
GIF1987LosslessAuf 256 Farben beschränkt, schwere Animationen

Konkretes Beispiel : Ein typisches E-Commerce-Produktfoto (1200x1200px, Qualität 85 %):

  • JPEG : 480 KB
  • PNG-24 : 1,8 MB (4x schwerer)
  • WebP : 160 KB (3x leichter als JPEG)
  • AVIF : 95 KB (5x leichter als JPEG)

WebP : Der moderne Standard

Entwickelt von Google

WebP wurde 2010 von Google entwickelt und bereits 2011 in Chrome integriert. Es vereint die Vorteile von JPEG (Lossy-Komprimierung) und PNG (Transparenz, Lossless).

Vorteile von WebP

✅

Stärken

  • ✓ -30 bis -50 % Dateigröße vs. JPEG bei gleicher Qualität
  • ✓ Unterstützung von Transparenz (Alphakanal)
  • ✓ Unterstützung von Animationen (ersetzt GIF)
  • ✓ 96 % der Browser (2026)
  • ✓ Lossy- UND Lossless-Komprimierung

⚠️

Einschränkungen

  • ⚠ Nicht unterstützt von Safari <14 (2020)
  • ⚠ IE 11 unterstützt es nicht
  • ⚠ AVIF übertrifft es bei der Komprimierung
  • ⚠ EXIF-Metadaten manchmal verloren

Browser-Unterstützung

🌐Chrome / Edge
✅ Seit 2011
🦊Firefox
✅ Seit 2019
🧭Safari
✅ Seit 2020 (v14)
📱Safari iOS
✅ Seit iOS 14

AVIF : Das Format der nächsten Generation

Ein offener Standard

AVIF (AV1 Image File Format) basiert auf dem Video-Codec AV1, entwickelt von der Alliance for Open Media (Google, Netflix, Amazon, Apple, Mozilla...). Veröffentlicht im Jahr 2019, ist es das leistungsfähigste Format im Jahr 2026.

Warum AVIF überlegen ist

-50%

vs. JPEG bei gleicher Qualität

-20%

vs. WebP bei gleicher Qualität

10bit

Farbtiefe (HDR)

Detaillierter Vergleich

KriteriumWebPAVIF
KomprimierungGutAusgezeichnet (-20%)
Browser-Unterstützung96%88%
KodierungszeitSchnell (50ms)Langsam (200ms)
Farbtiefe8-bit10-bit (HDR)
Transparenz✅✅
Animation✅✅

Browser-Unterstützung AVIF

🌐Chrome / Edge
✅ Seit Chrome 85 (2020)
🦊Firefox
✅ Seit Firefox 93 (2021)
🧭Safari
✅ Seit Safari 16 (2022)
📱Safari iOS
✅ Seit iOS 16 (2022)

Achtung

Achtung : 12 % der Besucher unterstützen AVIF noch nicht (hauptsächlich ältere Browser und iOS <16). Es sollte immer ein WebP- oder JPEG-Fallback vorgesehen werden.

Welche Strategie wählen?

Empfehlungen nach Anwendungsfall

🏆 Option 1 : AVIF + WebP + JPEG (Optimal)

AVIF für moderne Browser ausliefern, WebP als Fallback, JPEG für ältere Browser.

<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Beschreibung" />
</picture>

✅ Beste Performance • ✅ 100 % Unterstützung • ⚠️ Komplex zu verwalten

🥈 Option 2 : WebP + JPEG (Ausgewogen)

WebP für 96 % der Besucher, JPEG für die verbleibenden 4 %.

<picture>
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Beschreibung" />
</picture>

✅ Guter Kompromiss • ✅ Einfach • ✅ 96 % Abdeckung

🥉 Option 3 : Optimiertes JPEG (Minimum)

Wenn Sie WebP/AVIF nicht verwenden können, optimieren Sie zumindest Ihre JPEG-Bilder.

• Komprimierung auf 85 % (optimales Qualitäts-/Größenverhältnis)
• Exakte Abmessungen (kein CSS-Resize)
• Progressive JPEG für progressives Laden

⚠️ Begrenzter Gewinn • ✅ 100 % kompatibel • ⚠️ 2-3x größer als WebP

Lexiik verwaltet alles automatisch

Das Lexiik CDN implementiert Option 1 (AVIF + WebP + JPEG) automatisch, ohne dass Code geschrieben werden muss :

  1. 1
    Browser-Erkennung

    Das CDN analysiert den User-Agent und die Accept-Header

  2. 2
    Dynamische Konvertierung

    Chrome/Edge → AVIF | Safari/Firefox → WebP | IE → JPEG

  3. 3
    Edge-Cache

    Jede Variante wird für 1 Jahr gecacht

  4. 4
    Ultraschnelle Auslieferung

    Vom nächstgelegenen Rechenzentrum (<50ms)

Den Effekt messen

Reales Beispiel : Mode-Shop (3200 Produkte)

❌

Vorher (nur JPEG)

Durchschnittsgröße/Bild420 KB
LCP mobil4,8s
Bandbreite/Monat2,4 TB
✅

Nachher (AVIF + WebP + CDN)

Durchschnittsgröße/Bild85 KB (-80%)
LCP mobil1,4s (-71%)
Bandbreite/Monat480 GB (-80%)

📊 Geschäftlicher Einfluss

+28%
Mobile Conversions
+15%
Organischer Traffic
-240€
Einsparung Bandbreite/Monat

Fazit und nächste Schritte

Im Jahr 2026 ist WebP das Minimum für jeden seriösen Online-Shop. AVIF ist die nahe Zukunft und ermöglicht erhebliche zusätzliche Einsparungen. Das Lexiik CDN bietet Ihnen beides automatisch.

⚡️

Lexiik CDN aktivieren

Aktivierungsanleitung in 3 Klicks, um WebP/AVIF automatisch zu nutzen.

🌱

Green SEO

Den CO₂-Fußabdruck mit optimierten Bildern reduzieren.