PNG, JPEG, WebP oder AVIF: Welches Format wählen?

PNG, JPEG, WebP und AVIF können alle Bilder im Browser darstellen, verfolgen aber unterschiedliche Ziele. Das „beste“ Format hängt davon ab, ob du ein Foto, einen Screenshot, ein Logo, Transparenz oder maximale Kompatibilität brauchst.

Der Bildkonverter kann Bilder lokal zwischen unterstützten Formaten umwandeln. Entscheidend ist jedoch, warum du ein Format wählst.

JPEG: bewährt für Fotografien

JPEG wurde für kontinuierliche Tonverläufe und natürliche Bilder entwickelt. Es verwendet typischerweise verlustbehaftete Kompression.

Stärken:

• sehr breite Unterstützung,
• gute Kompression für Fotos,
• etablierte Workflows,
• flexible Qualitätsstufen.

Schwächen:

• keine echte Alpha-Transparenz,
• sichtbare Artefakte bei starker Kompression,
• weniger geeignet für Textgrafiken und harte Kanten.

Für Fotografien ist JPEG weiterhin eine verlässliche Baseline.

Warum JPEG bei Text und Screenshots problematisch sein kann

JPEG arbeitet mit Verfahren, die feine Farb- und Helligkeitsdetails zusammenfassen. Bei Fotos ist das oft kaum sichtbar. Bei kleiner Schrift, UI-Screenshots oder Diagrammen können dagegen Ränder unsauber werden.

Für solche Inhalte ist ein verlustfreies Format häufig besser geeignet.

PNG: verlustfrei und transparent

PNG ist besonders stark bei:

• Screenshots,
• Logos,
• Diagrammen,
• UI-Grafiken,
• Bildern mit Transparenz,
• klaren Kanten.

PNG kann Bilddaten verlustfrei komprimieren. Nach dem Dekodieren werden die ursprünglichen Pixelwerte exakt rekonstruiert.

Das ist nützlich, kann aber bei Fotografien zu großen Dateien führen.

PNG-8 und Palette

PNG kann je nach Inhalt mit indizierten Farben sehr effizient sein. Eine Grafik mit wenigen Farben benötigt nicht zwangsläufig Millionen möglicher Farbwerte.

Bei komplexen Fotos hilft dieser Vorteil jedoch deutlich weniger.

Transparenz in PNG

PNG unterstützt einen Alphakanal. Damit lassen sich halbtransparente Kanten und weiche Schatten speichern.

Das ist ein zentraler Vorteil gegenüber klassischem JPEG.

WebP: modernes Allround-Format

WebP unterstützt:

• verlustbehaftete Kompression,
• verlustfreie Kompression,
• Alpha-Transparenz,
• Animation.

Für viele Web-Workflows ist WebP deshalb ein praktischer Kompromiss.

Bei Fotos kann es häufig kleinere Dateien als JPEG bei vergleichbarer wahrgenommener Qualität erzeugen. Bei Grafiken kann die verlustfreie Variante PNG ersetzen, wenn der konkrete Inhalt davon profitiert.

WebP ist nicht automatisch kleiner

Ein Formatwechsel allein garantiert keine Einsparung. Eine schlecht eingestellte WebP-Datei kann größer sein als ein gut optimiertes JPEG.

Vergleiche immer reale Dateien bei vergleichbarer visueller Qualität.

AVIF: sehr effiziente moderne Kompression

AVIF basiert auf moderner Videokompressionstechnologie und kann bei Fotos und komplexen Bildern sehr effizient sein.

Mögliche Vorteile:

• sehr kleine Dateien,
• gute Qualität bei niedrigen Bitraten,
• Transparenz,
• Unterstützung höherer Farbtiefen und moderner Farbräume.

Mögliche Nachteile:

• höhere Kodierungskosten,
• je nach Workflow langsamere Verarbeitung,
• nicht jede Bildart profitiert gleich stark.

Wann AVIF besonders interessant ist

AVIF lohnt sich vor allem, wenn große Bildmengen oder prominente Hero-Bilder optimiert werden und die Einsparung gegenüber WebP/JPEG tatsächlich messbar ist.

Bei kleinen Icons oder einfachen Screenshots kann ein anderes Format sinnvoller sein.

Format nach Inhalt wählen

Foto

Gute Kandidaten:

• JPEG,
• WebP,
• AVIF.

Screenshot oder UI

Gute Kandidaten:

• PNG,
• verlustfreies WebP.

Logo oder Icon

Wenn möglich:

• SVG.

Falls Raster nötig ist:

• PNG oder WebP mit Transparenz.

Illustration

Je nach Komplexität:

• SVG für echte Vektorgrafik,
• PNG/WebP für Raster,
• AVIF/WebP für komplexe malerische Inhalte.

SVG gehört in eine andere Kategorie

SVG speichert Vektorformen statt eines festen Pixelrasters. Für Logos, Icons und Diagramme ist es oft ideal.

Der Leitfaden SVG: das Vektorformat verstehen erklärt diesen Unterschied.

Transparenz als Entscheidungskriterium

Wenn echte Transparenz benötigt wird, fällt klassisches JPEG meist aus.

PNG, WebP und AVIF können Alpha speichern. Welche Variante am besten ist, hängt von Dateigröße, Browserziel und Bearbeitungsworkflow ab.

Verlustfrei oder verlustbehaftet?

Die Frage „Welches Format?“ reicht nicht aus. Viele moderne Formate können mehrere Kompressionsmodi verwenden.

Verlustfrei ist sinnvoll, wenn:

• Pixel exakt erhalten bleiben müssen,
• Text oder harte Kanten dominieren,
• Zwischenbearbeitung vorgesehen ist.

Verlustbehaftet ist sinnvoll, wenn:

• Fotos oder komplexe natürliche Motive vorliegen,
• Dateigröße wichtiger ist als perfekte Pixelidentität,
• eine visuell unauffällige Reduktion akzeptabel ist.

Wiederholtes Neukodieren vermeiden

Ein JPEG wiederholt als JPEG zu speichern kann Qualitätsverluste kumulieren.

Besser:

• mit einer hochwertigen Quelle arbeiten;
• finale Zielabmessungen bestimmen;
• erst am Ende in das Auslieferungsformat kodieren.

Pixelabmessungen zuerst optimieren

Ein riesiges Bild bleibt auch in einem effizienten Format unnötig groß.

Bestimme zuerst die benötigte Auflösung und reduziere die Abmessungen mit dem Bildgrößen-Werkzeug.

Danach lohnt sich der Formatvergleich.

Kompression und Format gehören zusammen

Der Artikel Wie komprimiert man ein Bild ohne sichtbaren Qualitätsverlust? zeigt, warum Qualitätsstufe, Motiv und Zielgröße gemeinsam betrachtet werden sollten.

Ein Format ist nur ein Teil der Optimierung.

Browserunterstützung und Fallbacks

Moderne Browser unterstützen WebP breit, AVIF ebenfalls zunehmend. In sehr konservativen Umgebungen kann JPEG oder PNG als Fallback sinnvoll sein.

Mit <picture> lassen sich verschiedene Formate anbieten:

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

Der Browser wählt eine unterstützte Quelle.

Responsive Varianten zusätzlich zum Format

Ein 320-Pixel-Smartphone benötigt oft nicht dieselbe Datei wie ein großer Desktop.

Darum sollte Formatwahl mit responsive Bildern kombiniert werden.

Visuelle Qualität wirklich vergleichen

Dateigröße allein ist kein Qualitätsmaß.

Vergleiche:

• feine Texturen,
• Gesichter,
• Himmel und Verläufe,
• scharfe Kanten,
• Text,
• Transparenzkanten,
• Farbtreue.

Ein um 10 % kleineres Bild lohnt sich nicht, wenn störende Artefakte sichtbar werden.

Metadaten beeinflussen ebenfalls die Größe

EXIF-, XMP- und andere Zusatzdaten können Speicher benötigen. Gleichzeitig können sie sensible Informationen enthalten.

Der Leitfaden Bildmetadaten und Datenschutz erklärt, wann Entfernen sinnvoll ist.

Eine pragmatische Auswahlstrategie

Für ein typisches Webprojekt:

• Logo/Icon → SVG;
• Foto → WebP oder AVIF, JPEG als robuster Fallback;
• Screenshot/UI → PNG oder verlustfreies WebP;
• transparente Rastergrafik → PNG/WebP/AVIF;
• kritische Kompatibilität → JPEG/PNG.

Danach immer reale Größe und Qualität messen.

Fazit

Kein Bildformat gewinnt in allen Situationen. JPEG bleibt stark für kompatible Fotografie, PNG für verlustfreie Grafiken und Transparenz, WebP als flexibler Allrounder und AVIF für besonders effiziente moderne Kompression.

Die beste Entscheidung entsteht aus Bildtyp, Zielqualität, Dateigröße, Transparenz, Browserunterstützung und Workflow - nicht aus dem Namen des Formats allein.