WebP vs. AVIF vs. JPEG vs. PNG: Welches Bildformat sollten Sie wählen und wie reduzieren Sie die Dateigröße?

Im Jahr 2026 sind alle vier Formate weiterhin sinnvoll, allerdings für unterschiedliche Aufgaben:

• AVIF gewinnt bei Fotos und komplexen Bildern meistens beim Übertragungsvolumen.
• WebP bietet einen sehr guten Kompromiss aus Komprimierung, Funktionen, Kompatibilität und Implementierungsaufwand.
• JPEG bleibt das sicherste Fallback für Fotografie und Systeme mit unbekannten Anforderungen.
• PNG eignet sich vor allem für verlustfreie Rastergrafiken, UI-Screenshots, pixelgenaue Details und Assets mit präziser Transparenz.

TL;DR: Für Fotos zuerst AVIF, danach WebP und JPEG als Fallback ausliefern. Bei Screenshots, einfachen Grafiken und Transparenz verlustfreies WebP oder AVIF mit PNG vergleichen. Für Logos und Icons ist SVG normalerweise besser als eines dieser Rasterformate.

Funktionen, Kompatibilität und Empfehlungen wurden zuletzt am 23. Juli 2026 geprüft.

Die wichtigsten Unterschiede

AVIF unterstützt verlustbehaftete und verlustfreie Komprimierung, Transparenz, Animation, HDR und Wide Color Gamut. WebP kombiniert verlustbehaftete und verlustfreie Modi mit Alpha-Transparenz und Animation. PNG ist verlustfrei und unterstützt abgestufte Alpha-Transparenz, erzeugt bei Fotografien jedoch meist einen zu großen Transfer.

Schnelle Entscheidung nach Asset-Typ

Ein Format sollte nicht allen Bildern aufgezwungen werden. Das beste Ergebnis liefert eine Richtlinie nach Asset-Typ, nicht die Regel „alles nach AVIF konvertieren“.

1. JPEG: weiterhin nützlich, aber selten die beste Primärwahl

JPEG wurde für Fotografien entwickelt. Die verlustbehaftete Komprimierung entfernt Informationen, die das menschliche Sehen weniger deutlich wahrnimmt. Dadurch werden Fotos deutlich kleiner als verlustfreie PNG-Dateien. Bei zu aggressiver Komprimierung entstehen jedoch sichtbare Blöcke, Farbverschiebungen und Detailverlust.

Vorteile von JPEG

• nahezu universelle Unterstützung in Browsern, Editoren, CMS und externen Plattformen,
• zuverlässiges Fallback für Fotos,
• schnelles Kodieren und Dekodieren,
• Unterstützung für Progressive JPEG,
• ausgereifte Optimierer wie MozJPEG.

Progressive JPEG zeigt zuerst eine grobe Version über die gesamte Bildfläche und erhöht danach schrittweise die Qualität. Es kann etwas kleiner als ein Baseline-JPEG sein und fühlt sich bei langsamer Übertragung schneller an.

Grenzen von JPEG

• kein Alphakanal,
• keine Animation,
• verlustbehaftete Komprimierung,
• Text, feine Linien und UI-Elemente bekommen schnell Artefakte,
• wiederholtes Speichern verschlechtert die Qualität,
• WebP und AVIF sind bei vergleichbarer Qualität häufig kleiner.

Eine offizielle Untersuchung des WebP-Teams ergab bei vergleichbarem SSIM 25-34 % kleinere WebP-Dateien als JPEG. Das ist keine feste Zusage für jedes Asset, denn Quelle, Encoder-Version, Einstellungen und Qualitätsmetrik beeinflussen das Ergebnis.

Wann ist JPEG 2026 sinnvoll?

JPEG ist vernünftig, wenn:

• eine einzelne Datei in möglichst vielen Systemen funktionieren muss,
• Sie den empfangenden Client nicht kontrollieren,
• das Bild in einem älteren CMS, einer E-Mail, einem Dokument oder einer Drittplattform landet,
• Sie ein Fallback im <picture>-Element benötigen,
• der AVIF/WebP-Prozess noch nicht bereit ist.

Auf einem kontrollierten modernen Frontend sollten neuere Varianten normalerweise zuerst ausgeliefert werden.

2. PNG: Verlustfreiheit, Schärfe und Transparenz zum Preis großer Dateien

PNG komprimiert verlustfrei und bewahrt die Pixeldaten ohne Kompressionsverlust. Zusätzlich unterstützt es einen Alphakanal mit vielen Transparenzstufen statt nur vollständig sichtbaren oder unsichtbaren Pixeln.

Vorteile von PNG

• sehr scharfer Text, Linien und UI-Elemente,
• vollständige Alpha-Transparenz,
• kein Generationsverlust beim erneuten Speichern,
• universelle Kompatibilität,
• gutes Referenzformat für einfache Rastergrafiken.

Grenzen von PNG

• Fotos sind meist deutlich größer als JPEG, WebP oder AVIF,
• klassisches PNG ist nicht animiert; dafür existiert APNG,
• Raster skaliert schlechter als SVG,
• unnötige Metadaten, Kanäle oder ungeeignete Paletten erhöhen die Größe,
• Transparenz allein ist heute kein ausreichender Grund, immer PNG zu verwenden.

web.dev weist darauf hin, dass PNG für Fotografie fast nie das richtige Auslieferungsformat ist, da die Verlustfreiheit zu übermäßigem Transfer führt. Einfache halbtransparente Grafiken sollten mit WebP oder AVIF verglichen werden.

Wann gewinnt PNG weiterhin?

PNG ist eine sichere Wahl, wenn:

• ein Screenshot kleinen Text und dünne Linien enthält,
• eine verlustfreie Rasterkopie benötigt wird,
• die Zielplattform PNG, aber kein WebP oder AVIF akzeptiert,
• die Grafik nur wenige Farben nutzt,
• perfekte Reproduktion wichtiger als Transfer ist,
• eine Quelldatei für spätere Kodierungen benötigt wird.

Bei Logos, Icons, Diagrammen und einfachen Illustrationen zuerst SVG testen. Vektoren skalieren meist besser und können kleiner sein.

3. WebP: das praktischste Standardformat

Google entwickelte WebP zunächst als effizientere JPEG-Alternative. Später kamen Verlustfreiheit, Alphakanal und Animation hinzu. Dadurch kann WebP JPEG-Fotos, viele PNG-Grafiken und manche GIF-Animationen ersetzen.

Vorteile von WebP

• verlustbehaftete und verlustfreie Modi,
• Transparenz,
• Animation,
• breite Unterstützung in aktuellen Browsern,
• reifes Ökosystem in CMS, Bibliotheken und Bild-CDNs,
• meist kleiner als JPEG oder PNG,
• einfachere und häufig schnellere Kodierung als AVIF.

Grenzen von WebP

• keine progressive Darstellung,
• ältere Software und manche Publikationsprozesse verlangen JPEG oder PNG,
• ein Quality-Wert ist zwischen Formaten nicht direkt vergleichbar,
• WebP ist nicht immer kleiner als gut kodiertes AVIF,
• verlustfreies WebP schlägt nicht bei jeder simplen Grafik ein optimiertes PNG.

Wann ist WebP die beste Wahl?

WebP eignet sich besonders, wenn ein Team:

• Bilder schnell reduzieren möchte, ohne komplexe Pipeline,
• Transparenz erhalten muss,
• fast alle aktuellen Browser mit einer modernen Variante bedienen will,
• Bilder lokal oder on demand verarbeitet,
• die Zahl der Produktionsformate begrenzen möchte,
• Qualität, Größe und Kodierungskosten ausbalancieren will.

Der POLPROG-Bildkonverter und -optimierer verarbeitet PNG, JPG und WebP lokal im Browser und unterstützt Konvertierung, Komprimierung, Größenänderung und das Entfernen von Metadaten.

4. AVIF: kleinster Transfer und größter moderner Funktionsumfang

AVIF basiert auf dem AV1-Codec und dem HEIF-Container. Das Format unterstützt verlustbehaftete und verlustfreie Komprimierung, Alphakanal, Animation, HDR und Wide Color Gamut.

Vorteile von AVIF

• sehr hohe Kompressionseffizienz,
• gute Qualität bei niedriger Bitrate,
• verlustbehaftete und verlustfreie Modi,
• Transparenz und Animation,
• 8-, 10- und 12-Bit sowie HDR,
• Unterstützung in allen aktuellen Hauptbrowsern,
• besonders gute Ergebnisse bei Fotos, Gradienten und komplexen Motiven.

AVIF gehört seit Januar 2024 zu Baseline und wird daher von aktuellen Versionen der großen Browser-Engines unterstützt.

Grenzen von AVIF

• keine progressive Darstellung; das Bild muss im Allgemeinen erst geladen werden,
• Kodierung kann mehr Rechenleistung als JPEG oder WebP benötigen,
• Qualität und Größe hängen stark von Encoder, Geschwindigkeit, Subsampling und Einstellungen ab,
• einige externe Systeme lehnen .avif weiterhin ab,
• sehr kleine Grafiken können größer als SVG, PNG oder WebP sein,
• falsche Einstellungen können Texturen und kleinen Text weichzeichnen.

MDN weist auf eine häufig etwas bessere Komprimierung als WebP hin, aber auch auf die fehlende progressive Darstellung. Eine feste Aussage wie „AVIF ist immer 50 % kleiner“ ist nicht seriös.

Wann lohnt sich AVIF?

AVIF ist besonders sinnvoll, wenn:

• Bilder einen großen Anteil am Transfer haben,
• viele Produkt- oder Hero-Fotos vorhanden sind,
• eine automatische Bildpipeline existiert,
• Assets einmal kodiert und häufig ausgeliefert werden,
• HDR, Wide Gamut oder höhere Bittiefe wichtig sind,
• WebP/JPEG als Fallback verfügbar bleiben.

5. Ist AVIF immer kleiner als WebP?

Nein. web.dev nennt AVIF für Fotokataloge als stärksten Kandidaten, WebP als modernen Fallback und JPEG als zuverlässigsten Standard. Das Einzelergebnis hängt jedoch ab von:

• Bildinhalt und Auflösung,
• Rauschen,
• Text und dünnen Linien,
• verlustbehaftetem oder verlustfreiem Modus,
• Bittiefe und Chroma-Subsampling,
• Encoder-Version und Implementierung,
• Geschwindigkeitseinstellung,
• verwendeter Qualitätsmetrik.

Vergleichen Sie bei gleichwertiger visueller Qualität, nicht bei derselben Zahl im Quality-Regler. quality=75 bedeutet in JPEG, WebP und AVIF nicht dasselbe.

6. Format, Core Web Vitals und LCP

Ein modernes Format kann die Downloadzeit verkürzen und damit den Transferanteil des LCP verbessern. Es behebt aber weder eine späte Erkennung des Bildes noch einen langsamen Server, falsche Abmessungen oder JavaScript-gesteuertes Rendering.

Für ein LCP-Bild:

• kein loading="lazy",
• möglichst früh im HTML platzieren,
• fetchpriority="high" erwägen,
• korrekte width und height angeben,
• passende Auflösung über srcset und sizes liefern,
• Weiterleitungen und Abhängigkeiten reduzieren,
• keine ungenutzten Varianten parallel laden.

web.dev empfiehlt, Bilder oberhalb des Folds und besonders LCP-Kandidaten nicht lazy zu laden. fetchpriority="high" kann die frühere Priorisierung unterstützen.

Mehr dazu: Website-Audit 2026 und Core Web Vitals in der Praxis.

7. Korrekte Umsetzung mit AVIF, WebP und Fallback

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Dashboard zur Analyse der Website-Performance"
  >
</picture>

Der Browser wählt die erste unterstützte <source>-Quelle. Daher steht AVIF vor WebP, während <img> das Fallback bereitstellt.

Google findet das Bild im src-Attribut des <img>-Elements auch innerhalb von <picture>. JPEG, PNG, WebP und AVIF werden von Google Search unterstützt.

Für Bilder außerhalb des Viewports kann loading="lazy" verwendet werden:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Vergleich der Bilddateigrößen"
>

Das Attribut darf nicht mechanisch auf Hero-, Produkt- oder andere LCP-Bilder gesetzt werden.

8. Responsive Images sind wichtiger als nur das Format

Ein 2400 × 1600 großes AVIF bleibt verschwenderisch, wenn ein Smartphone es nur 360 Pixel breit zeigt. Die richtige Pixelzahl kann mehr sparen als ein Codec-Wechsel.

Berücksichtigen Sie:

• Breitenvarianten in srcset,
• korrekte sizes,
• eigenen mobilen Bildausschnitt, wenn nötig,
• hohe Pixeldichte nur bei sichtbarem Nutzen,
• maximale Upload-Abmessungen im CMS,
• echte Thumbnails statt großer Bilder, die nur per CSS verkleinert werden.

Format, Auflösung und Kompression müssen als ein System behandelt werden.

9. Qualität fair vergleichen

Vergleichen Sie nicht nur Kilobyte:

1. Mit Original oder verlustfreier Quelle beginnen.
2. Mehrere Qualitätsstufen je Format erzeugen.
3. Im endgültigen Anzeigemaßstab prüfen.
4. Gesichter, Haare, Gradienten, Text, Kanten und dunkle Bereiche kontrollieren.
5. Kodier- und Dekodierkosten im Zielsystem messen.
6. Die kleinste Datei mit akzeptabler Qualität wählen.
7. Den Test für verschiedene Bildklassen wiederholen.

SSIM kann automatisierte Vergleiche unterstützen, ersetzt aber keine visuelle Kontrolle.

10. Häufige Fehler

Bereits stark komprimiertes JPEG erneut kodieren

AVIF kann verlorene Details nicht zurückbringen. Nutzen Sie möglichst das Original oder eine verlustfreie Quelle.

Einen Quality-Wert für alle Bilder verwenden

Portrait, Screenshot, Nachtfoto und Gradient reagieren unterschiedlich. Eine Pipeline braucht Profile oder Qualitätskontrollen.

Fehlende Abmessungen

Ohne width und height kann CLS entstehen - unabhängig vom Format.

Hero-Bild lazy laden

Auch ein kleines AVIF kommt zu spät, wenn es erst nach dem Rendering entdeckt oder mit loading="lazy" verzögert wird.

Zu viele Varianten generieren

Viele Breiten in vier Formaten erhöhen Speicher- und Build-Kosten. Generieren Sie nur tatsächlich genutzte Varianten.

PNG für jede Transparenz

WebP und AVIF unterstützen ebenfalls Alpha. PNG bleibt sinnvoll, wenn es bei einem bestimmten Asset bessere Kanten, eine kleinere Datei oder notwendige Plattformkompatibilität liefert.

Raster für Icons und Logos

Für einfache UI-Assets ist SVG meist skalierbarer, leichter und besser stylebar.

11. Bild-SEO: Das Format ist nur ein Teil

Google Search unterstützt alle vier Formate. Es gibt keine dokumentierte Ranking-Prämie nur für .avif oder .webp. Der Nutzen ist indirekt: Weniger Transfer kann Performance und Nutzererfahrung verbessern.

Achten Sie außerdem auf:

• stabile, beschreibende Dateiadressen,
• Dateiendung passend zum echten Typ,
• korrekten MIME-Type,
• sinnvollen Alternativtext,
• sichtbaren Textkontext,
• Crawler-Zugriff,
• korrekte Abmessungen,
• Image-Sitemap bei bildlastigen Websites,
• Lizenzmetadaten, wenn relevant.

Prüfen Sie Technik und Geschwindigkeit mit der Website-Zustandsprüfung und Social-Media-Grafiken mit der Open-Graph-Vorschau.

12. Empfohlene Bildrichtlinie

Einfache Variante

• WebP als Primärformat,
• JPEG-Fallback für Fotos,
• PNG nur für ausgewählte Grafiken,
• SVG für Logos und Icons,
• srcset für wichtige Bilder.

Optimale Variante

• AVIF zuerst,
• WebP danach,
• JPEG als Fallback,
• verlustfreies WebP/AVIF oder PNG für Screenshots,
• automatische Breitenvarianten,
• Qualitäts- und Transferbudgets,
• LCP- und RUM-Messung nach Deployment.

E-Commerce

• Produktfotos in AVIF und WebP,
• JPEG-Fallback,
• große Bilder und Thumbnails getrennt,
• Zoom-Variante erst nach Interaktion,
• kritisches Produktbild nicht lazy laden,
• feine Texturen, Farben und Transparenz testen,
• Cache und Bild-CDN nutzen.

Fazit

AVIF ist am stärksten, wenn minimaler Transfer Priorität hat und eine gute Pipeline vorhanden ist. WebP ist das beste Allroundformat für Einfachheit, Kompatibilität und starke Komprimierung. JPEG bleibt das sicherste Foto-Fallback, PNG sollte gezielt für verlustfreie Grafiken und Transparenz eingesetzt werden.

Die beste Strategie 2026 lautet nicht „ein Format wählen“, sondern:

AVIF → WebP → JPEG

für Fotos und:

verlustfreies AVIF/WebP ↔ PNG

für scharfe oder transparente Grafiken nach realem Qualitäts- und Größenvergleich.