JPEG, PNG oder WebP: Welches Bildformat sollten Sie wahlen?

Warum die Formatwahl wichtig ist

Das Bildformat, das Sie wahlen, beeinflusst drei Dinge: Dateigrosse, visuelle Qualitat und Browser-Unterstuttzung. Die falsche Wahl fuhrt zu langsam ladenden Seiten (uberdimensionierte Fotos), schlechter Qualitat (verlustbehaftete Komprimierung am falschen Inhalt) oder Darstellungsfehlern auf alteren Geraten.

JPEG, Der Fotostandard

JPEG (auch als JPG geschrieben) ist ein verlustbehaftetes Komprimierungsformat. Es verwirft Bilddaten bei der Komprimierung, um kleinere Dateigrossen zu erzielen. Die Menge der verworfenen Daten ist uber eine Qualitatseinstellung konfigurierbar (typischerweise 0-100).

Am besten fur: Fotografien, komplexe Bilder mit Farbverlaufen und vielen Farben, jedes Bild, bei dem ein geringer Qualitarsverlust akzeptabel ist.

Nicht ideal fur: Screenshots, Linienzeichnungen, Textuberlagerungen, Logos, Bilder, die scharfe Kanten oder Transparenz benotigen.

Typischer Dateigrosvorteil: Ein hochwertiges JPEG ist in der Regel 60-80 % kleiner als ein verlustfreies PNG desselben Fotos.

Wesentliche Einschrankung: Jedes Mal, wenn Sie ein JPEG speichern (bearbeiten, speichern, bearbeiten, speichern), verlieren Sie mehr Qualitat. Bewahren Sie immer eine Originalversion in einem verlustfreien Format (PNG, TIFF) auf, wenn Sie erneut bearbeiten mochten.

JPEG unterstutzt keine Transparenz (Alphakanal).

PNG, Verlustfrei und transparent

PNG verwendet verlustfreie Komprimierung, keine Bilddaten werden verworfen. Was Sie hineingeben, ist genau das, was Sie herausbekommen.

Am besten fur: Screenshots, Interface-Grafiken, Logos, Textuberlagerungen, Bilder mit scharfen Kanten, jedes Bild, das einen transparenten Hintergrund benotigt.

Nicht ideal fur: Fotografien (Dateigrossen sind im Vergleich zu JPEG bei gleicher Qualitat sehr gross).

Wesentlicher Vorteil: Unterstutzt vollstandige Alphakanal-Transparenz, was es zum Standard fur UI-Elemente, Uberlagerungen und Bilder macht, die auf verschiedenen Hintergrundfarben platziert werden mussen.

PNG ist die sichere Standardwahl, wenn Qualitat nicht beeintrachtigt werden darf und Dateigrosse zweitrangig ist.

WebP, Der moderne Ersatz

WebP wurde von Google entwickelt und unterstutzt sowohl verlustbehaftete als auch verlustfreie Komprimierung. Es erzielt kleinere Dateigrossen als JPEG und PNG bei gleicher Qualitat.

Am besten fur: Web-Bilder allgemein, es wurde speziell fur das Web entwickelt. Sowohl Fotos als auch Grafiken profitieren.

Dateigrosvorteil:

• WebP verlustbehaftet vs JPEG: ca. 25-35 % kleiner bei gleicher Qualitat
• WebP verlustfrei vs PNG: ca. 26 % kleiner im Durchschnitt

Browser-Unterstuttzung: Hervorragend, alle modernen Browser (Chrome, Firefox, Safari 14+, Edge) unterstutzen WebP. Wenn Sie sehr alte Browser (IE, Safari 13 und alter) unterstutzen mussen, benotigen Sie noch einen Fallback.

Transparenz: In verlustbehafteten und verlustfreien WebP-Modi unterstutzt.

Das <picture>-Element in HTML erlaubt es, WebP mit einem JPEG/PNG-Fallback bereitzustellen:

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

AVIF, Der aufstrebende Konkurrent

AVIF ist ein neueres Format mit noch besserer Komprimierung als WebP (typischerweise 20-50 % kleiner als verlustbehaftetes WebP). Die Browser-Unterstuttzung wachst schnell, ist aber noch nicht universell.

Praktischer Entscheidungsleitfaden

Formate im Browser konvertieren

Der Bildkonverter auf dieser Seite konvertiert zwischen JPEG, PNG und WebP vollstandig in Ihrem Browser, kein Upload an einen Server, keine Dateigrosbegrenzungen jenseits Ihres RAM. Sie konnen auch die Qualitat fur verlustbehaftete Formate anpassen.

Kurz zusammengefasst

• JPEG: Fotografien, akzeptiert Qualitarsverlust, keine Transparenz
• PNG: verlustfrei, Transparenz, Logos und Screenshots
• WebP: das Beste aus beiden Welten fur das Web, etwas geringere Universalunterstuttzung
• Im Zweifelsfall fur Web-Nutzung: WebP zuerst, JPEG-Fallback fur Fotos, PNG fur Transparenz