Bildformate erklärt: JPEG, PNG, WebP, GIF, SVG, AVIF

Zuletzt aktualisiert: June 27, 2026

Es gibt kein einziges beste Bildformat — jedes existiert, weil es ein anderes Problem löst. JPEG komprimiert Fotos, PNG bewahrt scharfe Kanten und Transparenz, WebP und AVIF verkleinern Fotos weiter, SVG skaliert ohne Pixelverlust, und GIF animiert. Die Wahl des richtigen Formats ist eine Content-Entscheidung, keine Präferenz. Dieser Leitfaden erklärt, was jedes Format tut, anhand real gemessener Dateigrößen von einem Quellbild.

Kurzantwort: Welches Format sollten Sie verwenden?

Passen Sie das Format auf den Bildinhalt und den Verwendungsort an:

Für eine detaillierte Aufschlüsselung von Format zu Format sehen Sie sich den AVIF vs WebP vs JPEG Vergleich an.

Wie vergleichen sich die Formate?

Die Dateigrößenunterschiede sind groß und konstant. Gemessen anhand eines 1400×933 Fotos:

PNGs 853 KB stechen hervor: Die verlustfreie Speicherung eines Fotos kostet ungefähr 8× mehr als JPEG und 19× mehr als AVIF. Deshalb ist PNG für vollständige Seitenfotos falsch, obwohl es technisch in der Lage ist, sie zu speichern.

JPEG — das Arbeitstier für Fotos

JPEG (1992) ist das verlustbehaftete Format für Fotos. Es wirft hochfrequente Details weg, die das Auge kaum wahrnimmt, weshalb es Fotos dramatisch verkleinert, aber scharfen Text und dünne Linien verschwimmen lässt.

• Am besten geeignet für: Fotos, Farbverläufe, komplexe reale Szenen.
• Vermeiden Sie für: Text, UI-Screenshots, scharfe Linienkunst, alles, was Transparenz benötigt (JPEG hat keinen Alpha-Kanal).
• Achten Sie auf: Sichtbare 8×8 Blockartefakte unter einer Qualität von ~70.

Verwenden Sie eine Qualität von 80–85 für Webfotos. Sehen Sie sich an, wie man JPEG komprimiert.

PNG — scharfe Kanten und Transparenz

PNG ist verlustfrei und unterstützt einen vollständigen Alpha-Kanal, wodurch es jedes Pixel und jede Transparenz bewahrt. Der Preis dafür ist die Dateigröße: Es komprimiert Fotos nicht gut.

• Am besten geeignet für: Grafiken mit scharfen Kanten, Text, Logos, UI-Screenshots, transparente Bilder.
• Vermeiden Sie für: vollständige Seitenfotos (verwenden Sie stattdessen WebP/AVIF/JPEG – siehe die obere Tabelle).
• Achten Sie auf: riesige Dateien bei Fotos. Reduzieren Sie mit PNG-8 (≤256 Farben) für flache Grafiken.

Für Details zur Transparenz sehen Sie sich an, wie man transparente Bilder erstellt.

WebP — der moderne Web-Standard

WebP (2010) kann sowohl verlustbehaftet als auch verlustfrei sein, unterstützt Alpha und schlägt JPEG bei gleicher Qualität um ~25–35%. Die Unterstützung in modernen Browsern beträgt ~98%.

• Am besten geeignet für: Webfotos und transparente Webbilder, bei denen Bytes wichtig sind.
• Vermeiden Sie für: E-Mails und sehr alte Clients (verwenden Sie JPEG/PNG Fallback).
• Servieren Sie mit: einem JPEG/PNG Fallback in einem <picture> Element.

AVIF — die kleinsten Fotos

AVIF (2019) verwendet die Intra-Frame Tools des AV1 Video-Codecs und schlägt WebP um weitere 20–30%. Die Unterstützung beträgt ~96% und steigt stetig an.

• Am besten geeignet für: Fotos, bei denen die kleinsten Bytes wichtig sind (Hero Images, LCP).
• Vermeiden Sie für: wenn Sie sich keine langsame Kodierung leisten können oder für die allerältesten Browser (verwenden Sie den <picture> Fallback).
• Achten Sie auf: Verschmieren feiner Texturen bei sehr niedriger Qualität (<q40).

SVG — skalierbare Vektoren

SVG ist ein Vektorformat: Es speichert Formen, nicht Pixel, wodurch es ohne Qualitätsverlust in jede Größe skaliert und für einfache Kunst winzig ist.

• Am besten geeignet für: Logos, Icons, einfache Illustrationen, alles, was skaliert werden muss.
• Vermeiden Sie für: Fotos (SVG kann sie nicht effizient darstellen).
• Achten Sie auf: Komplexität — ein detailliertes SVG kann groß sein; bei Bedarf rasterisieren.

GIF — Animations-Legacy

GIF animiert und unterstützt 1-Bit-Transparenz, ist aber auf 256 Farben begrenzt und viel größer als moderne animierte Formate für denselben Inhalt.

• Am besten geeignet für: nichts Modernes — ersetzen Sie es durch animiertes WebP oder AVIF.
• Vermeiden Sie für: alles, was farbkritisch ist (256-Farben-Limit) oder empfindlich auf die Größe reagiert.
• Achten Sie auf: große Dateien; ein 3-Sekunden-GIF ist oft größer als das MP4 vom selben Clip.

Wie entscheiden Sie unter Druck?

Verwenden Sie diesen kurzen Entscheidungsfluss:

1. Ist es ein Foto? → WebP/AVIF (mit JPEG Fallback).
2. Benötigt es Transparenz? → PNG oder WebP (Alpha).
3. Ist es ein Logo/Icon/Illustration, das skaliert werden muss? → SVG.
4. Handelt es sich um scharfen Text/UI? → PNG.
5. Ist es eine Animation? → Animiertes WebP/AVIF, nicht GIF.
6. Ist es für E-Mails? → JPEG oder PNG (kein WebP/AVIF).

Bei fast jedem Webfoto lautet die Antwort heute "WebP oder AVIF mit einem JPEG Fallback". JPEG bleibt nur wegen der universellen Kompatibilität erhalten, nicht weil es die beste Wahl ist.

Wie dienen Sie mehrere Formate?

Verwenden Sie das <picture> Element, damit jeder Browser das bestmögliche Format erhält, das er unterstützt:

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

Der Browser wählt den ersten unterstützten Typ und ignoriert den Rest. Behalten Sie immer ein echtes <img> mit einem JPEG src als letzten Fallback bei. Sehen Sie sich den Leitfaden zu Bildformaten auf MDN für die aktuelle Tabelle der Browser-Unterstützung an.

Häufige Fehler

• Verwendung von PNG für Fotos. Es funktioniert, aber die Datei ist 8–19× größer als nötig.
• Verwendung von JPEG für Text oder Logos. Die Komprimierung lässt scharfe Kanten verschwimmen. Verwenden Sie PNG oder SVG.
• Bereitstellung eines Formats ohne Fallback. AVIF/WebP benötigen einen JPEG Fallback für ältere Clients.
• Animieren mit GIF. Animiertes WebP/AVIF sind viel kleiner und unterstützen mehr Farben.
• Ignorieren von SVG bei Logos. Ein gerastertes Logo ist bei hohem DPI unscharf; SVG bleibt in jeder Größe scharf.

Häufig gestellte Fragen

Welches Bildformat sollte ich verwenden?

JPEG für Fotos, PNG für Grafiken mit scharfen Kanten oder Transparenz, WebP als moderner Web-Standard (kleiner als beides), AVIF für die kleinsten Fotos auf modernen Browsern und SVG für Logos und Icons. Passen Sie das Format an den Inhalt an.

Ist WebP besser als JPEG?

Für die Webbereitstellung ja — WebP ist bei gleicher Qualität 25 bis 35 Prozent kleiner und wird von allen aktuellen Browsern unterstützt. Behalten Sie JPEG nur als Fallback für sehr alte Browser bei. Sehen Sie sich den WebP-Konverter-Leitfaden an.

Wann sollte ich AVIF verwenden?

Wenn Sie es kodieren können und Ihr Publikum hauptsächlich moderne Browser nutzt — AVIF ist ungefähr 50 Prozent kleiner als JPEG. Der Kompromiss sind langsamere Kodierung und Lücken bei älteren Browsern. Versenden Sie AVIF mit einem WebP Fallback über ein <picture> Element.

Unterstützt PNG Transparenz?

Ja — PNG hat einen vollständigen Alpha-Kanal, weshalb es das Format für Grafiken und Logos mit Transparenz ist. JPEG unterstützt keine Transparenz. WebP und AVIF unterstützen ebenfalls Alpha, bei kleineren Größen für die Webbereitstellung.

Welches Format ist am kleinsten für Fotos?

AVIF (am kleinsten auf modernen Browsern), dann WebP, dann JPEG. PNG ist das größte für Fotos, weil es verlustfrei ist. Für die Webbereitstellung ist WebP der sichere Standard; AVIF, wenn Sie es kodieren können und Ihr Publikum moderne Browser nutzt.

Was ist das kleinste Bildformat?

AVIF für Fotos auf modernen Browsern (ungefähr 50 Prozent kleiner als JPEG), dann WebP. PNG ist das größte für Fotos, weil es verlustfrei ist. Für Grafiken mit Transparenz schlagen WebP oder AVIF PNG. Passen Sie das Format an den Inhalt und die Browserunterstützung Ihres Publikums an.

Was ist der Unterschied zwischen verlustbehaftet und verlustfrei?

Verlustfrei (PNG, lossless WebP) bewahrt jedes Pixel exakt und kann perfekt rückgängig gemacht werden — es geht keine Qualität verloren. Verlustbehaftet (JPEG, lossy WebP, AVIF) wirft Details weg, die das Auge am wenigsten bemerkt, um die Datei zu verkleinern, und der Verlust ist permanent. Bei Fotos gewinnt Lossy; bei Grafiken, Texten und Master-Dateien, die Sie bearbeiten werden, gewinnt Lossless. Wählen Sie nach dem Inhalt.

Was ist das kleinste Format für Grafiken mit Transparenz?

WebP oder AVIF, von beiden wird ein Alpha-Kanal unterstützt und komprimieren viel kleiner als PNG. Für Logos und Icons auf modernen Browsern reduziert WebP oder AVIF die Dateigröße dramatisch im Vergleich zu PNG bei gleichzeitiger Beibehaltung der Transparenz. Servieren Sie sie mit einem PNG Fallback über ein <picture> Element für ältere Browser, denen diese Funktion fehlt.

Bildnachweise

• Formatgrößenvergleich und Balkendiagramm — erstellt vom Autor anhand eines E-Commerce-Fotos (Pexels #16675632, Foto von Mikael Blomkvist), um die real gemessenen Dateigrößen über PNG, JPEG, WebP und AVIF zu zeigen.