WebP vs. JPG vs. PNG: Welches Bildformat solltest du nutzen?

JPG — Fotos und kleine Dateien

JPG nutzt verlustbehaftete Kompression, die Fotos stark verkleinert, mit kaum sichtbarem Verlust. Ideal für Fotos und komplexe Bilder, unterstützt aber keine Transparenz und verliert bei jedem erneuten Speichern etwas Qualität.

PNG — Transparenz und scharfe Kanten

PNG ist verlustfrei und unterstützt Transparenz — die richtige Wahl für Logos, Icons, Screenshots und Grafiken mit Text oder scharfen Kanten. Der Nachteil: bei Fotos deutlich größere Dateien als JPG.

WebP — der moderne Allrounder

WebP unterstützt verlustbehaftete und verlustfreie Kompression plus Transparenz und ist bei gleicher Qualität meist 25–35 % kleiner als JPG oder PNG. Alle modernen Browser unterstützen es; ein JPG- oder PNG-Fallback lohnt nur für sehr alte Clients. Nutze WebP standardmäßig im Web, JPG für maximale Foto-Kompatibilität und PNG, wenn du verlustfreie Transparenz brauchst.

Wie viel kleiner ist WebP wirklich?

Googles eigene Tests sehen verlustfreies WebP etwa 26 % kleiner als PNG und verlustbehaftetes WebP rund 25–34 % kleiner als JPEG bei gleicher Qualität. Die Ersparnis ist bei Fotos und detailreichen Bildern am größten, wo jedes Kilobyte für Ladezeit und Core Web Vitals zählt. Bei winzigen, flachen Grafiken ist die absolute Ersparnis kleiner — ein 2-KB-Icon hat wenig zu trimmen.

Browser-Unterstützung und Fallbacks

WebP läuft in jedem aktuellen Browser — Chrome, Firefox, Edge, Safari und deren mobilen Versionen. Falls du noch sehr alte Clients bedienst, liefere es über das HTML-picture-Element mit einem JPG oder PNG als Fallback in einer source: moderne Browser bekommen WebP, der Rest das klassische Format. In der Praxis ist für die meisten Websites heute ein einfaches WebP sicher.

Wann man WebP nicht nutzen sollte

WebP ist fürs Web gemacht, nicht für alles. Für den Druck bleiben CMYK-Formate wie TIFF oder ein hochwertiges PDF maßgeblich, und einige E-Mail-Clients und ältere Design-Tools stolpern darüber. Wenn eine Grafik als optimiertes PNG schon nur ein paar Kilobyte wiegt, bringt die Umwandlung in WebP wenig und fügt deiner Pipeline einen Schritt hinzu. Faustregel: Nimm WebP für echte Fotos und detailreiche Interface-Bilder für Browser, und behalte die klassischen Formate, wo Kompatibilität oder Druckqualität wichtiger sind als Bytes.

Häufige Fragen

Ist WebP besser als JPG?

Fürs Web meist ja: WebP erzeugt kleinere Dateien bei gleicher Bildqualität und bietet Transparenz. JPG gewinnt weiterhin, wenn universelle Kompatibilität am wichtigsten ist.

Verliert die Umwandlung von JPG in WebP an Qualität?

Verlustbehaftetes WebP komprimiert neu, es gibt also etwas Verlust, aber bei gleichen Qualitätseinstellungen behält WebP mehr Details pro Kilobyte als JPG. Nutze verlustfreies WebP, um jeglichen Verlust zu vermeiden.

Welches Format eignet sich am besten für Logos?

PNG oder verlustfreies WebP. Beide behalten scharfe Kanten und Transparenz, anders als JPG, das Kanten verwischt und nicht transparent sein kann.