JPG vs PNG vs WebP: Welches Format solltest du wählen?

Drei Formate. Drei verschiedene Stärken. Und du bist dir nicht sicher, welches du für dein Projekt verwenden sollst.

JPG ist seit den 1990er Jahren der Fotostandard. PNG bietet Transparenz und verlustfreie Qualität. WebP kombiniert das Beste aus beiden und ist dabei kleiner. Aber jedes Format hat Situationen, in denen es die richtige Wahl ist.

Dieser Leitfaden zeigt dir genau, wann du welches Format nutzen solltest. Die Entscheidung hängt davon ab, was du mit dem Bild machst.

Was sind die wichtigsten Unterschiede zwischen JPG, PNG und WebP?

Hier ist der schnelle Vergleich:

Eigenschaft	JPG	PNG	WebP
Komprimierungsart	Nur verlustbehaftet	Nur verlustfrei	Verlustbehaftet und verlustfrei
Transparenz	Nein	Ja	Ja
Animation	Nein	Nein (APNG existiert, ist aber selten)	Ja
Farbtiefe	16,7 Millionen	16,7 Millionen + Alpha	16,7 Millionen + Alpha
Am besten für	Fotos	Grafiken, Screenshots	Web-Auslieferung
Dateigröße (Foto)	Klein	Sehr groß	Am kleinsten
Dateigröße (Grafik)	Mittel	Klein bis mittel	Am kleinsten
Browser-Unterstützung	100%	100%	97%+
E-Mail-Unterstützung	Hervorragend	Hervorragend	Schlecht
Druck-Unterstützung	Hervorragend	Gut	Schlecht

Die Kurzfassung: JPG komprimiert Fotos gut, kann aber keine Transparenz. PNG bietet Transparenz und verlustfreie Qualität, erzeugt aber riesige Dateien bei Fotos. WebP kann alles und erzeugt die kleinsten Dateien. Aber es funktioniert nicht überall.

Wann solltest du JPG verwenden?

JPG ist die richtige Wahl, wenn du Fotos brauchst, die überall funktionieren.

Fotos für E-Mails. Du verschickst Bilder per E-Mail? Nimm JPG. Jeder E-Mail-Client zeigt JPG korrekt an. WebP-Unterstützung ist Glückssache. PNG funktioniert, aber die Dateien sind riesig.

Fotos für den Druck. Druckereien erwarten JPG (oder TIFF). Schick ihnen kein WebP. Möglicherweise können sie es nicht öffnen.

Kamerafotos zur Speicherung. Dein Handy fotografiert in JPG. Deine Kamera fotografiert in JPG. Für die allgemeine Fotospeicherung und zum Teilen ist JPG das universelle Format.

Social-Media-Beiträge. Plattformen wie Instagram und Facebook akzeptieren zwar mehrere Formate. Aber JPG ist seit Jahren der Standard. Die Ergebnisse sind vorhersehbar und konsistent.

Wenn Dateigröße wichtig ist und Transparenz nicht. JPG bei 85% Qualität liefert dir großartig aussehende Fotos. Und das bei einem Bruchteil der PNG-Dateigröße.

Vermeide JPG bei: Logos, Icons, textlastigen Bildern, Screenshots, allem was Transparenz braucht und Bildern, die du wiederholt bearbeitest (die Qualität verschlechtert sich mit jedem Speichern).

Wann solltest du PNG verwenden?

PNG ist die richtige Wahl, wenn Qualität und Transparenz wichtiger sind als Dateigröße.

Bilder mit transparentem Hintergrund. Produktfreisteller, Logos, Icons, Sticker, Wasserzeichen. Wenn das Bild auf jeder farbigen Fläche schweben soll, handhabt PNG Transparenz perfekt.

Screenshots. Text in Screenshots bleibt in PNG gestochen scharf. JPG verwischt Text und erzeugt hässliche Artefakte um Buchstaben. Für Tutorials, Dokumentation und Fehlerberichte nimm immer PNG.

Logos und Icons. Scharfe Kanten, flache Farben, klare Linien. PNG glänzt hier. Ein Logo in PNG sieht pixelgenau aus. Dasselbe Logo in JPG hat unscharfe Kanten und Farbverläufe.

Grafiken mit Text. Infografiken, Diagramme, Charts und jedes Bild mit lesbarem Text. PNG hält den Text scharf. JPG macht ihn unscharf.

Quelldateien zum Bearbeiten. PNG ist verlustfrei. Speichere es 100 Mal und nichts ändert sich. Nutze PNG als Arbeitsformat beim Bearbeiten von Bildern. Exportiere zu JPG oder WebP, wenn du fertig bist.

Favicons und App-Icons. Der Standard für Web-Favicons und mobile App-Icons ist PNG. Browser und Betriebssysteme erwarten es.

Vermeide PNG bei: Fotos auf Websites (viel zu groß), großen Mengen an Web-Bildern und jeder Situation, in der Ladegeschwindigkeit wichtig ist.

Wann solltest du WebP verwenden?

WebP ist die richtige Wahl für fast jedes Bild auf einer Website.

Alle Website-Bilder. Fotos, Grafiken, Icons, Hintergründe. WebP verarbeitet jeden Bildtyp und erzeugt kleinere Dateien als JPG und PNG.

Transparente Bilder fürs Web. WebP bietet dir die Transparenz von PNG bei 30-70% kleineren Dateigrößen. Produktfotos mit transparentem Hintergrund sind ein perfekter Anwendungsfall.

Vorschaubilder und Bildergalerien. Kleine Bilder profitieren am meisten von der Einsparung. Ein 50 KB JPG-Vorschaubild schrumpft auf 30 KB als WebP. Bei einer Galerie mit 100 Vorschaubildern sparst du 2 MB.

Progressive Web Apps. Apps, die offline funktionieren, brauchen kleine Dateien. WebP hält die Cache-Größen handhabbar.

Wenn du verlustbehaftete und verlustfreie Optionen brauchst. WebP unterstützt beide Modi. Nutze verlustbehaftet für Fotos, verlustfrei für Grafiken. Ein Format, zwei Modi.

Vermeide WebP bei: E-Mail-Anhängen, Druckmaterialien, Dateien für Leute mit alter Software und Archivierung, bei der universelle Kompatibilität wichtig ist.

Wie vergleichen sich die Dateigrößen tatsächlich?

Echte Zahlen für dasselbe Bild in jedem Format:

Bildinhalt	JPG (85%)	PNG	WebP (85%)
Foto 4000x3000	1,5 MB	15 MB	1,0 MB
Foto 1920x1080	500 KB	5 MB	340 KB
Screenshot 1920x1080	250 KB	400 KB	150 KB
Logo 500x200	35 KB	25 KB	15 KB
Icon 64x64	5 KB	3 KB	2 KB
Infografik 800x2000	200 KB	350 KB	130 KB

Bei Fotos ist PNG absurd groß. 10x größer als JPG und 15x größer als WebP. Verwende PNG niemals für Fotos im Web.

Bei Grafiken mit flachen Farben (Logos, Icons) ist PNG akzeptabel. Aber WebP schlägt es trotzdem um 30-40%.

WebP gewinnt in jeder Zeile. Es ist das kleinste Format bei allen Bildtypen. Der einzige Nachteil ist die Kompatibilität. Unsere vollständigen Empfehlungen zum besten Format für Websites findest du in unserem speziellen Leitfaden.

Kann man alle drei Formate auf einer Website nutzen?

Ja, und viele Websites tun das. Hier ist ein praktischer Ansatz:

Liefere WebP an Browser, die es unterstützen. Das sind 97% deiner Besucher. Sie bekommen die kleinsten und schnellsten Bilder.

Nutze JPG als Fallback für Fotos und PNG für transparente Bilder für die restlichen 3%. Verwende das <picture>-Element in HTML.

Nutze PNG für Favicons und andere spezielle Dateien, die Browser im PNG-Format erwarten.

Behalte die Originale in JPG oder PNG in deinen Projektdateien. Erzeuge WebP-Versionen während des Build-Prozesses oder nutze ein CDN, das automatisch konvertiert.

Wenn du noch weiter gehen willst, nimm AVIF dazu. Unser AVIF-Formatvergleich zeigt, wie es im Vergleich zu WebP abschneidet.

Einen vollständigen Überblick über alle Bildformate und ihre Einsatzbereiche finden Sie in unserem Ratgeber zu Bildformaten.

Wie konvertierst du zwischen diesen Formaten?

ConvertIMG verarbeitet alle drei Formate und mehr. Konvertiere JPG zu WebP für die Web-Auslieferung. Konvertiere PNG zu WebP für kleinere transparente Bilder. Konvertiere WebP zu JPG für E-Mail-Kompatibilität. Du kannst auch deine Bilder komprimieren für noch kleinere Dateien. Lade deine Dateien hoch, wähle ein Format und lade das Ergebnis herunter. Kostenlos, privat und funktioniert komplett in deinem Browser.