Bestes Bildformat für Web 2026:
JPG vs PNG vs WebP vs AVIF

Die 4 Formate im Wettbewerb 2026

Die Landschaft der Web-Bildformate hat sich seit den Anfängen von GIF und JPEG dramatisch verändert. Im Jahr 2026 dominieren vier Formate:

• JPEG (1992) — Das 34 Jahre alte Arbeitstier. Immer noch das am universellsten unterstützte Bildformat im Internet. Nutzt DCT-Kompression mit Verlust, optimiert für Fotografien.
• PNG (1996) — Der verlustfreie Standard für Grafiken. Unterstützt Alpha-Transparenz, behält jeden Pixel bei und eignet sich hervorragend für Text, Icons und Screenshots.
• WebP (2010) — Googles moderne Alternative mit Unterstützung für verlustbehaftete und verlustfreie Kompression, Transparenz und Animation. Erzeugt 25–34% kleinere Dateien als JPEG.
• AVIF (2019) — Der neueste Konkurrent basierend auf dem AV1-Video-Codec. Liefert etwa 50% kleinere Dateien als JPEG mit besserer Farbverlauf-Handhabung und HDR-Unterstützung.

Jedes Format hat eigene Stärken. Die richtige Wahl hängt von Ihrem Inhaltstyp, Zielgruppe und Leistungszielen ab.

Umfassender Vergleich

JPEG — Der Fotografie-Standard

JPEG ist seit Mitte der 1990er Jahre das dominante Web-Bildformat. Es wurde speziell für Fotografie entworfen und 34 Jahre später bleibt es das am universellsten kompatible Bildformat überhaupt.

Stärken

• Universelle Unterstützung: Jeder Browser, E-Mail-Client, CMS, Social-Media-Plattform, Bildbetrachter und jedes Betriebssystem unterstützt JPEG. Kein anderes Format kommt seiner Kompatibilität nahe.
• Hervorragende Fotokompression: Für fotografische Inhalte erreicht JPEG Kompressionsverhältnisse von 10:1 bis 20:1 mit Qualität, die die meisten Betrachter nicht vom Original unterscheiden können.
• Schnelle Kodierung und Dekodierung: JPEG-Kompression ist rechnerisch einfach. Sogar schwache mobile Geräte können JPEGs sofort kodieren und dekodieren.
• Ausgereifte Tools: Jeder Bildeditor, jedes Kommandozeilentool und jede Programmierbibliothek unterstützt JPEG. Optimierungstools wie mozjpeg und jpegtran sind hochentwickelt.
• Progressive Ladung: Progressive JPEG zeigen sofort eine niedrig aufgelöste Vorschau und verfeinern dann bis zur vollständigen Qualität, während Daten ankommen. Benutzer sehen Inhalte schneller.

Schwächen

• Keine Transparenz: JPEG unterstützt keine Alpha-Kanäle. Bilder mit transparenten Bereichen müssen eine durchgehende Hintergrundfarbe verwenden, was die Composite-Flexibilität einschränkt.
• Nur mit Verlust: Es gibt keinen verlustfreien JPEG-Modus für die Web-Nutzung. Jeder Speicher verwirft einige Daten, und Generationsverlust sammelt sich über mehrere Änderungen an.
• Farbverlauf-Banding: Bei niedrigeren Qualitätseinstellungen entwickeln sanfte Farbverläufe (Himmel, Studio-Hintergründe) sichtbare Banding-Stufen — JEPGs offensichtlichstes Artefakt.
• Block-Artefakte: JPEG verarbeitet Bilder in 8×8-Pixel-Blöcken. Bei aggressiver Kompression werden Blockgrenzen sichtbar als Gittermuster.

Am besten für

Fotografien, bei denen universelle Kompatibilität wichtiger ist als optimale Dateigröße. E-Mail-Newsletter, Social-Media-OG-Bilder, RSS-Feed-Miniaturansichten und jeder Kontext, in dem Sie WebP- oder AVIF-Unterstützung nicht garantieren können.

PNG — Der Grafik-Standard

PNG wurde 1996 als patentfreier Ersatz für GIF erstellt. Es wurde schnell zum Web-Standard für nicht-fotografische Bilder und bleibt das bevorzugte Format für Grafiken, Icons und alle Bilder, die Transparenz oder pixel-perfekte Qualität benötigen.

Stärken

• Verlustfreie Kompression: PNG bewahrt jeden Pixel genau wie das Original. Keine Kompressions-Artefakte, kein Generationsverlust, keine Qualitätseinbußen, egal wie oft Sie ändern und speichern.
• Alpha-Transparenz: Voller 8-Bit-Alpha-Kanal mit 256 Transparenzstufen. Essentiell für Logos, Icons und Overlay-Grafiken, die sauber über jedem Hintergrund wirken müssen.
• Perfekt für Text und scharfe Kanten: UI-Elemente, Screenshots, Diagramme, Code-Ausschnitte und alle Bilder mit sauberen Grenzen. Wo JPEG unscharfe Halos um Text erzeugt, rendert PNG ihn perfekt.
• Kleine Dateien für einfache Grafiken: Bilder mit großen Bereichen von einheitlicher Farbe, begrenzten Farbpaletten und geometrischen Formen komprimieren oft kleiner als PNG als als JPEG, da PNGs Vorhersagefilter und DEFLATE repetitive Muster sehr effizient handhaben.
• Universelle Unterstützung: Wie JPEG funktioniert PNG in jedem Browser, E-Mail-Client und Bildeditor.

Schwächen

• Große Dateien für Fotografien: Ein 12-MP-Foto als PNG ist typischerweise 15–25 MB, verglichen mit 2–4 MB als JPEG Q85. Die verlustfreie Kompression kann einfach nicht mit der Verlust-kompression bei fotografischen Inhalten konkurrieren.
• Keine native Animation: APNG existiert aber hat inkonsistente Unterstützung und ist weit weniger effizient als WebP- oder AVIF-Animation. GIF bleibt für einfache Animationen häufiger verwendet.
• Kein progressives Rendering: PNG-Dateien müssen vollständig heruntergeladen werden, bevor sie in voller Auflösung angezeigt werden können. Interlaced PNG existiert aber fügt Dateigröße hinzu und wird selten verwendet.

Am besten für

Logos, Icons, UI-Elemente, Screenshots, Diagramme, Pixel-Art und alle Bilder mit Transparenz, Text oder scharfen Kanten, bei denen verlustfreie Qualität erforderlich ist. Auch das beste Archivformat für Quellbilder vor jeder Verlust-Konvertierung.

WebP — Der Moderne Allrounder

Google veröffentlichte WebP 2010 um die Einschränkungen sowohl von JPEG als auch PNG zu adressieren. Nach Jahren schrittweiser Browser-Adoption erreichte WebP kritische Masse, als Safari Unterstützung in Version 14 (2020) hinzufügte. 2026 übersteigt WebP-Unterstützung 96% aller Browser weltweit.

Kompressionsvorteil

WebPs Kompressionverbesserungen gegenüber Legacy-Formaten sind gut dokumentiert:

• WebP mit Verlust vs JPEG: 25–34% kleiner bei äquivalenter visueller Qualität (gemessen nach SSIM). Googles eigene Studie über 1 Million Web-Bilder bestätigte diese Spanne durchgehend.
• WebP ohne Verlust vs PNG: ~26% kleiner im Durchschnitt. Der Vorteil variiert je nach Inhalt — einfache Grafiken sehen größere Gewinne; komplexe Fotos sehen kleinere.

Dies sind keine theoretischen Zahlen. Für eine Website mit 1 MB JPEG-Bildern spart der Wechsel zu WebP 250–340 KB pro Seitenladevorgang. Über Tausende von täglichen Besuchern ist die Bandbreiteneinsparung erheblich.

Funktionen

• Mit und ohne Verlust in einem Format: Verwenden Sie mit Verlust für Fotos, ohne Verlust für Grafiken. Keine Notwendigkeit, zwischen zwei verschiedenen Formaten für verschiedene Inhaltstypen zu wählen.
• Alpha-Transparenz: Voller Alpha-Kanal in Modus mit und ohne Verlust. WebP mit Verlust und Transparenz ist signifikant kleiner als PNG — ideal für Produktbilder auf transparentem Hintergrund.
• Animation: WebP-Animation ersetzt animierte GIFs mit dramatisch kleineren Dateien (oft 50–80% kleiner). Unterstützt 24-Bit-Farbe statt GIFs 256-Farbpalette.
• Schnelle Kodierung: WebP kodiert schnell genug für Echtzeit-Konvertierung in CDN-Pipelines und Build-Prozessen.

Browser-Unterstützung 2026

Die verbleibenden ~4% ohne WebP-Unterstützung bestehen hauptsächlich aus älteren iOS-Geräten (vor iOS 14), Internet Explorer 11-Holdouts und Legacy-Enterprise-Browsern. Für die meisten Websites ist dies ein vernachlässigbarer Anteil, leicht mit JPEG/PNG-Fallbacks bewältigt.

Am besten für

Alle Web-Bilder 2026. WebP ist die sicherste "modernes Format"-Wahl — es bietet erhebliche Kompressionverbesserungen gegenüber JPEG und PNG mit Browser-Unterstützung hoch genug, dass Fallbacks nur für Randfall nötig sind.

AVIF — Die Nächste Generation

AVIF, basierend auf dem gebührenfreien AV1-Video-Codec, entstand 2019 als nächster Schritt in der Bildkompression. Es liefert die besten Kompressionsverhältnisse aller weitverbreiteten Formate und fügt Funktionen hinzu, die ältere Formate nicht haben.

Kompressionsvorteil

• AVIF vs JPEG: Ungefähr 50% kleiner bei äquivalenter visueller Qualität. Der Vorteil ist am dramatischsten für Fotografien mit sanften Farbverläufen, wo AVIF das Banding eliminiert, das JPEG plagt.
• AVIF vs WebP: Ungefähr 20% kleiner für fotografische Inhalte mit Verlust. Die Lücke verengt sich für verlustfreie Inhalte und einfache Grafiken.
• Überlegene Farbverlauf-Handhabung: AVIF nutzt größere Transformationsblöcke (bis 64×64) und sophistiziertere Vorhersagemodi als JEPGs 8×8-DCT. Dies eliminiert die Block- und Banding-Artefakte, die JEPGs primäre Schwäche sind.

Funktionen über Kompression hinaus

• HDR und breites Farbgamut: 10-Bit und 12-Bit Farbtiefe, Rec. 2020-Farbraum und PQ/HLG-Transferfunktionen. AVIF ist das einzige Web-Bildformat mit vollständiger HDR-Unterstützung.
• Filmkorn-Synthese: Der Encoder kann Filmkorn aus der Quelle analysieren und entfernen, dann das Decoder anweisen, es wiederherzustellen. Dies reduziert die Dateigröße für körnige Inhalte dramatisch ohne die wahrgenommene Textur zu ändern.
• Alpha-Transparenz: Voller Alpha-Kanal-Unterstützung in mit- und ohne-Verlust-Modi, genau wie WebP.
• Animation: AVIF-Sequenzen (von AV1-Video abgeleitet) sind extrem effizient für kurze Animationen.

Einschränkungen

• Kodierungsgeschwindigkeit: AVIF-Kodierung ist 5–20x langsamer als JPEG- oder WebP-Kodierung. Dies macht Echtzeit-Konvertierung für manche Anwendungsfälle unpraktisch. Vorkodierung während des Build-Prozesses ist der Standard-Ansatz.
• Browser-Unterstützung (~93%): Safari fügte AVIF-Unterstützung in Version 16.4 (2023) hinzu, aber ältere macOS und iOS-Versionen unterstützen es nicht. WebView-Unterstützung hängt vom Gerät ab. Die Lücke schließt sich aber bleibt bedeutend.
• Maximale Dimensionen: Einige AVIF-Implementierungen haben Kachel-Größenbeschränkungen. Sehr große Bilder (z.B. 8000×6000-Pixel-Panoramen) benötigen möglicherweise Kachelung oder werden von einigen Dekodern nicht unterstützt.
• Tool-Reife: AVIF-Tools verbessern sich schnell sind aber noch nicht so reif wie JPEG oder WebP. Einige Bildeditoren und CMS-Plattformen haben unvollständige AVIF-Unterstützung.

Am besten für

Hochleistungs-Web für Websites, die Ladegeschwindigkeit priorisieren und eine Multi-Format-Fallback-Kette implementieren können. Besonders effektiv für Foto-intensive Sites, wo die 50%-Einsparung gegenüber JPEG sich in bedeutende Bandbreiteneinsparung übersetzt.

Die 2026-Empfehlung — Multi-Format-Strategie

Kein Format ist optimal für jede Situation. Die moderne Best Practice ist eine progressive Fallback-Kette mit dem HTML <picture>-Element:

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

Der Browser bewertet Quellen von oben nach unten und nutzt das erste unterstützte Format:

1. AVIF — serviert an ~93% der Browser. Kleinste Dateigröße, beste Qualität.
2. WebP — serviert an ~3%, die WebP aber nicht AVIF unterstützen. Immer noch signifikant kleiner als JPEG.
3. JPEG — serviert an ~4%, die weder modernes Format unterstützen. Universale Fallback.

Schnelles Entscheidungshandbuch nach Inhaltstyp

Core Web Vitals Auswirkung

Googles Core Web Vitals (CWV) messen direkt Nutzererlebnis, und Bilder spielen eine zentrale Rolle in allen drei Metriken:

Largest Contentful Paint (LCP)

LCP misst, wie schnell das größte sichtbare Inhaltselement rendert. Für die meisten Seiten ist dies das Hero-Bild oder Banner-Foto. Googles Schwellenwert: unter 2,5 Sekunden für einen "guten" Score.

Kleinere Bilder laden schneller. Ein 200-KB-JPEG-Hero-Bild auf 130-KB-WebP (35% Einsparung) oder 100-KB-AVIF (50% Einsparung) zu ändern reduziert die LCP-Zeit direkt. Bei einer 4G-Mobilverbindung (~10 Mbps) spart 100 KB ungefähr 0,08 Sekunden. Bei einer 3G-Verbindung (~1,5 Mbps) entfernt die gleiche Einsparung 0,5 Sekunden — was der Unterschied zwischen "gut" und "verbessern erforderlich" für LCP sein kann.

Cumulative Layout Shift (CLS)

CLS misst unerwartete Layout-Verschiebung. Bilder ohne explizite width- und height-Attribute verursachen Layout-Verschiebungen, wenn sie laden und Inhalt nach unten schieben. Spezifizieren Sie immer Dimensionen:

<!-- Immer Breite und Höhe einschließen, um CLS zu verhindern -->
<img src="photo.webp" alt="..." width="800" height="600" loading="lazy">

Interaction to Next Paint (INP)

INP misst Responsivität auf Benutzerinteraktionen. Während Bildformat INP nicht direkt beeinflusst, können sehr große Bilder den Haupt-Thread während der Dekodierung blockieren. Moderne Formate wie WebP und AVIF dekodieren effizienter als äquivalent-qualitäts-JPEG, reduzieren Haupt-Thread-Contention.

Reale Dateigröße Benchmarks

Um die praktischen Unterschiede zu illustrieren, hier sind typische Dateigrößen für ein 1920×1080-Foto bei visuell äquivalenter Qualität:

Für eine Web-Seite mit 10 Fotos bei 1920×1080:

• JPEG: ~4 MB totales Bildgewicht
• WebP: ~2,8 MB (−30%)
• AVIF: ~2,1 MB (−48%)

Bei einer Mobilverbindung laden die AVIF-Version fast 2 Sekunden schneller als die JPEG-Version. Das ist eine signifikante, messbare Verbesserung im Nutzererlebnis und Suchranking.

Praktisches Migrationhandbuch

Bereit, die Bilder Ihrer Website zu modernisieren? Hier ist ein schrittweiser Ansatz:

Schritt 1: Audit Ihrer aktuellen Bilder

Führen Sie Google Lighthouse auf Ihren Schlüsselseiten aus. Suchen Sie nach der Gelegenheit "Bilder in Formaten der nächsten Generation servieren". Notieren Sie, welche Bilder flaggt werden und ihre aktuellen Größen.

Schritt 2: Konvertieren Sie bestehende Bilder

Nutzen Sie CleverUtils zur Batch-Konvertierung Ihrer JPEG- und PNG-Bilder zu WebP. Für Kommandozeilen-Konvertierung in großem Maßstab:

# Alle JPEG zu verlust-behaftete WebP (Qualität 85) konvertieren
for f in *.jpg; do
  convert "$f" -quality 85 -define webp:lossless=false "${f%.jpg}.webp"
done

# Alle PNG zu verlustfreie WebP konvertieren
for f in *.png; do
  convert "$f" -define webp:lossless=true "${f%.png}.webp"
done

# Erzeuge AVIF-Versionen (langsamer, bessere Kompression)
for f in *.jpg; do
  avifenc "$f" -s 6 -q 65 "${f%.jpg}.avif"
done

Schritt 3: Implementieren Sie das picture Element

Ersetzen Sie <img>-Tags durch <picture>-Elemente, die Format-Fallbacks enthalten. Behalten Sie das ursprüngliche JPEG oder PNG als finale <img>-Quelle für maximale Kompatibilität.

<!-- Vorher: einzelnes JPEG -->
<img src="hero.jpg" alt="Hero-Bild" width="1200" height="630">

<!-- Nachher: progressive Fallback -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero-Bild" width="1200" height="630" loading="lazy">
</picture>

Schritt 4: Konfigurieren Sie Ihr CDN

Viele CDNs (Cloudflare, Fastly, AWS CloudFront) unterstützen automatische Bildformat-Verhandlung über den Accept-Header. Das CDN erkennt browser-unterstützte Formate und serviert die optimale Version automatisch, ohne <picture>-Elemente in Ihrem HTML.

Schritt 5: Fügen Sie zu Ihrer Build-Pipeline hinzu

Für neue Bilder automatisieren Sie Format-Konvertierung in Ihrem Build-Prozess. Tools wie sharp (Node.js), Pillow (Python) und ImageMagick können WebP- und AVIF-Varianten während der Bereitstellung erzeugen.

Spezialfälle — Wenn sich die Regeln ändern

Wenn Sie Transparenz benötigen

Falls Ihr Bild transparente Bereiche benötigt (Logos auf variablen Hintergründen, Produktausschnitte, Overlays), verengen sich Ihre Optionen:

• Beste: WebP mit Verlust und Alpha — dramatisch kleiner als PNG während Transparenz bewahrt bleibt.
• Auch gut: AVIF mit Alpha — noch kleiner, aber prüfen Sie Browser-Unterstützung für Ihre Zielgruppe.
• Fallback: PNG — universale Unterstützung, größere Dateien, aber garantiert überall zu funktionieren.
• Nicht möglich: JPEG — unterstützt Transparenz überhaupt nicht.

Wenn SVG alles schlägt

Für Logos, Icons und Illustrationen mit geometrischen Formen ist SVG (Scalable Vector Graphics) allen Raster-Formaten überlegen. SVG-Dateien sind typischerweise 1–10 KB, skalieren zu jeder Auflösung ohne Qualitätsverlust und können mit CSS gestylt werden. Wenn Ihr Grafik als Vektoren ausgedrückt werden kann, ist SVG immer die Antwort.

Email und soziale Medien

Email-Clients haben notorisch schlechte Unterstützung für moderne Formate. Outlook, Gmail (in manchen Kontexten), Apple Mail und Thunderbird haben inkonsistenten WebP-Support und fast keinen AVIF-Support. Für Email-Newsletter und HTML-Email-Templates ist JPEG der einzige sichere Weg.

Social-Media-Plattformen (Facebook, Twitter, LinkedIn) akzeptieren WebP-Uploads 2026 aber servieren immer noch JPEG in vielen Kontexten. Open Graph og:image-Meta-Tags sollten JPEG oder PNG für maximale Crawler-Kompatibilität referenzieren.