Bildformate im Vergleich: JPG vs PNG vs WebP vs AVIF (2026)

Das Bildformat, das Du wählst, beeinflusst Seitenladegeschwindigkeit, SEO-Ranking (Core Web Vitals), Bandbreitenkosten, visuelle Qualität, Browser-Kompatibilität und Barrierefreiheit. In 2026 lautet die Antwort nicht mehr “einfach JPG verwenden”, moderne Formate sparen 50-70% Dateigröße bei gleichwertiger Qualität.

Diese Anleitung vergleicht die vier heute relevanten Formate: JPG, PNG, WebP, AVIF. Plus eine Anmerkung zu HEIC (Apple), TIFF (Druck) und SVG (Vektor).

Schnellreferenz-Tabelle

Format	Kompression	Transparenz	Animation	Browser-Support (2026)	Am besten für
JPG	Verlustbehaftet	Nein	Nein	100%	Fotos, E-Mail, max. Kompatibilität
PNG	Verlustfrei	Ja	Nein	100%	Logos, Symbole, Screenshots
WebP	Verlustbehaftet oder verlustfrei	Ja	Ja	96%	Modernes Web (Standard in 2026)
AVIF	Verlustbehaftet oder verlustfrei	Ja	Ja	92%	Performance-kritisches Web
HEIC	Verlustbehaftet	Ja	Ja	Nur iOS/macOS	Apple-Geräte-Speicherung
GIF	Verlustfrei	Nur 1-Bit	Ja	100%	Nur Legacy-Animationen
SVG	Verlustfrei Vektor	Ja	Ja	100%	Logos, Symbole, Illustrationen (jede Größe)

JPG (JPEG)

Geboren 1992. Universell unterstützt. Verlustbehaftete Kompression mit Qualitätsregler (1-100). Bei Qualität 75-85 für das menschliche Auge nicht vom Original unterscheidbar, aber 5-10× kleiner als die RAW-Quelle.

Stärken:

• Universelle Kompatibilität (buchstäblich überall).
• Winzige Dateien für Fotos.
• Reife, gut verstandene Kompression.

Schwächen:

• Keine Transparenz (muss soliden Hintergrund verwenden).
• Kompressionsartefakte bei niedriger Qualität (Klötzchen, Halos).
• Keine Animation.
• Älterer Standard, für modernes Web abgelöst.

Verwende es, wenn: Fotos per E-Mail, Senden an alte Systeme, max. Kompatibilität zählt, keine Transparenz nötig.

PNG (Portable Network Graphics)

Geboren 1996. Verlustfreie Kompression. Zwei Varianten: PNG-8 (256 Farben, GIF-Ersatz) und PNG-24 (16 Millionen Farben, Foto-Qualität). Beide unterstützen Transparenz (8-Bit-Alpha-Kanal), das Killer-Feature.

Stärken:

• Verlustfrei: bit-perfekte Kopie des Originals, nie Artefakte.
• Transparenz-Unterstützung (Alpha-Kanal).
• Scharf bei jedem Zoom (keine Kompressionsklötzchen).
• Universelle Kompatibilität.

Schwächen:

• Viel größer als JPG für Fotos (2-5× größer).
• Keine Animation (verwende APNG, aber Support gemischt).
• Weniger effiziente Kompression als moderne Formate.

Verwende es, wenn: Logos, Symbole, Screenshots, Strichzeichnungen, Illustrationen, überall, wo Du scharfe Linien oder Transparenz brauchst.

WebP

Von Google 2010 entwickelt. Verlustbehafteter Modus rivalisiert mit JPG bei ~25-35% besserer Kompression bei gleicher Qualität. Verlustfreier Modus rivalisiert mit PNG bei ~25% besserer Kompression. Animationsmodus rivalisiert mit GIF bei massiv besserer Qualität und Kompression.

In 2026 liegt WebP-Support global bei 96%, jeder moderne Browser (Chrome, Firefox, Safari 14+, Edge) unterstützt es nativ. Nur uralte Browser und manche E-Mail-Clients haben keinen Support.

Stärken:

• Beste Balance aus Kompressionseffizienz, Kompatibilität und Feature-Set.
• Ein Format deckt verlustbehaftete, verlustfreie und animierte Bedürfnisse.
• Unterstützt von allen modernen Bild-CDNs (Cloudinary, Imgix, Cloudflare Images).
• Frei und offen (lizenzfrei).

Schwächen:

• Etwas langsamer dekodiert als JPG (auf moderner Hardware vernachlässigbar).
• Manche Legacy-Software (Photoshop CS5 und älter) braucht Plugin.
• Encoding marginal langsamer als JPG.

Verwende es, wenn: überall im modernen Web. WebP sollte Dein Standard in 2026 sein, außer ein spezifischer Grund spricht dagegen.

AVIF (AV1 Image File Format)

Veröffentlicht 2019, basiert auf dem AV1-Video-Codec. Das kompressioneffizienteste weit unterstützte Format in 2026, typisch 25-35% kleiner als WebP bei gleicher Qualität.

Support 2026: ~92% global. Alle großen Browser unterstützen es (Chrome 85+, Firefox 93+, Safari 16.4+, Edge). Manche spezifische Umgebungen (E-Mail-Clients, sehr alte Enterprise-Software) nicht.

Stärken:

• Beste Kompression jedes weit unterstützten Formats.
• Unterstützt HDR (High Dynamic Range, 10/12-Bit Farbtiefe).
• Unterstützt Transparenz, Animation.
• Offen und lizenzfrei.
• Exzellente Qualität sogar bei sehr niedrigen Bitraten.

Schwächen:

• Encoding ist langsam (10-30× langsamer als JPG). Nicht ideal für Anfragezeit-Encoding.
• Langsameres Decoding als WebP (immer noch Millisekunden, aber messbar).
• Etwas weniger kompatibel als WebP.
• Noch nicht allgegenwärtig in Bildbearbeitungssoftware.

Verwende es, wenn: performance-kritische Sites, wo jedes KB zählt. Vorab zur Build-Zeit kodieren, mit WebP- und JPG-Fallbacks ausliefern.

Die 2026 Best Practice: <picture> mit Fallbacks

Wähle nicht ein Format, liefere das beste, das jeder Browser unterstützt:

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

Moderne Browser wählen AVIF, etwas ältere Browser fallen auf WebP zurück, sehr alte bekommen JPG. Alles, während dieselbe <img>-Semantik und derselbe alt-Text geteilt werden.

Frameworks automatisieren das:

• Next.js: <Image>-Komponente handhabt AVIF/WebP/JPG automatisch.
• Astro: <Image> aus astro:assets macht dasselbe.
• Cloudinary / Imgix: liefert basierend auf Accept: image/avif-Anfrageheader.

Was ist mit HEIC?

HEIC (High Efficiency Image Container) ist, was Dein iPhone speichert. Gleiche Kompressionsfamilie wie AVIF (HEVC-Video-Codec). Exzellente Kompression, unterstützt Transparenz und HDR.

Problem: nur Apple-Geräte unterstützen HEIC nativ. Windows, Android-Browser, Webserver, Bildsoftware brauchen alle Plugins oder Konvertierung.

Best Practice: HEIC zu JPG oder WebP konvertieren vor dem Teilen oder Web-Hosting. HEIC zu JPG macht das in Deinem Browser.

Was ist mit TIFF, BMP, GIF?

• TIFF: Pre-Press / professionelles Druck-Archivieren. Riesige Dateien, Standard ohne Kompression. Im Web nicht verwenden.
• BMP: Legacy-Windows-Format. Keine Kompression. In 2026 nirgendwo verwenden.
• GIF: 1-Bit-Transparenz, 256 Farben, verlustfrei. Animation funktioniert, aber ineffizient, jede moderne Alternative (WebP, AVIF, sogar MP4-Video) ist besser. Nur für Legacy-Kompatibilität verwenden.

Was ist mit SVG?

SVG ist Vektor, kein konkurrierendes Format für Fotos, aber unschlagbar für Logos, Symbole, Illustrationen, Diagramme. Auflösungsunabhängig (skaliert unendlich ohne Qualitätsverlust), winzige Dateigröße für einfache Grafiken, unterstützt CSS-Styling und JS-Interaktion.

Verwende SVG für: Logos, Symbole (Favicons), Datenvisualisierungen, einfache Illustrationen, jede Grafik, die gezeichnet statt fotografiert ist.

Favicon-Generator gibt SVG-Varianten für moderne Browser aus.

Entscheidungsbaum für die Formatwahl

1. Ist es ein Logo, Symbol oder eine einfache Grafik? → SVG.
2. Fotografischer Inhalt ohne Transparenzbedarf? → AVIF (Build-Zeit) → WebP-Fallback → JPG-Fallback.
3. Fotografischer Inhalt mit Transparenz? → AVIF oder WebP (beide unterstützen Alpha) → PNG-Fallback.
4. Logo, Screenshot oder Grafik mit Transparenz? → PNG (oder WebP-verlustfrei für Größe).
5. Maximale E-Mail-/Legacy-Kompatibilität? → JPG (keine Transparenz) oder PNG (mit Transparenz).
6. Animation? → WebP (oder AVIF, wenn neuere Browser okay) → GIF nur als letzter Ausweg.

Praxis-Konvertierungspfade

Fotograf liefert an Kunde: RAW-Master behalten, JPG Qualität 95 (Web) oder TIFF (Druck) liefern.

Webmaster optimiert bestehende Site: alle PNGs/JPGs zur Build-Zeit zu AVIF + WebP konvertieren. Über <picture> ausliefern.

E-Commerce-Produktfotos: WebP Qualität 80 ist der Sweet Spot. AVIF, wenn Dein Traffic-Profil die Encoding-Zeit rechtfertigt.

Blog-Hero-Bilder: AVIF (mit WebP- und JPG-Fallback), Core Web Vitals belohnen Dich dafür.

Social-Media-Cover-Bild: JPG oder PNG. Die meisten Plattformen kodieren ohnehin neu, also nicht mit WebP/AVIF beim Upload bemühen.

E-Mail-Signatur: PNG (max. Kompatibilität, Transparenz-Unterstützung) oder JPG (kleiner).

Zusammenfassung

In 2026 ist der moderne Web-Bild-Stack AVIF → WebP → JPG, ausgeliefert über <picture> mit Fallbacks, mit PNG und SVG, die ihre Rollen für Grafiken und Logos halten.

Für einmalige Konvertierungen handhabt Bild umwandeln die volle Matrix lokal, Dein Bild erreicht keinen Server, unterstützt JPG, PNG, WebP und AVIF als Eingabe und Ausgabe. Verwende es nach Bedarf, aber verstehe, was jedes Format optimiert, damit Deine Entscheidungen bewusst sind.