Initializing, please wait a moment

JPG vs PNG fuer das Web - wann welches Bildformat verwenden

Veroeffentlicht 20. April 2026 Last reviewed: 2026-07-02

JPG eignet sich fuer Fotos - verlustbehaftete Komprimierung macht sie 5-10x kleiner als PNG ohne sichtbaren Qualitaetsverlust. PNG eignet sich fuer Screenshots, Logos und Bilder mit Transparenz - verlustfrei, Textkanten bleiben scharf. WebP liefert beide Formate mit 25-35% weniger Dateigroesse.

Wie jedes Format Pixel komprimiert

JPG (auch JPEG geschrieben) ist ein verlustbehaftetes Format. Der Encoder konvertiert Pixel in den Frequenzbereich (DCT), quantisiert hochfrequente Koeffizienten und wirft das Detail weg, das das menschliche Auge am wenigsten wahrscheinlich bemerken wuerde. Der Qualitaetsregler (0-100, wobei hoeher besser ist) steuert, wie aggressiv diese Quantisierung Details entfernt. JPG ist brillant bei Fotos und schrecklich bei scharfen Kanten - Text, UI-Chrome und Line Art bekommen bei typischen Web-Qualitaetseinstellungen sichtbare Halo-Artefakte.

PNG (Portable Network Graphics) ist ein verlustfreies Format. Die ausgegebenen Pixel sind Bit-fuer-Bit identisch mit den eingegebenen Pixeln. PNG komprimiert, indem es Muster im Pixelgitter findet (DEFLATE auf gefilterten Scanlines) - hervorragend bei grossen einfarbigen Bereichen, mittelmaessig bei fotografischen Verlaeufen. PNG unterstuetzt auch Transparenz ueber den Alphakanal, was JPG nicht tut.

Dateigroesse-Vergleich fuer dasselbe Bild

See vergleiche typische JPG- und PNG-Dateigroessen using the four points in this diagram. — Foto, Screenshot, Logo, Icons - JPG oder PNG nach Bildtyp waehlen.

Bildtyp	JPG (Qualitaet 82)	PNG	WebP (lossy q=82)	AVIF (q=50)
Fotografie 1920×1080	~320 KB	~3,2 MB	~220 KB	~160 KB
Screenshot 1920×1080 (UI)	~180 KB (sichtbare Halos)	~130 KB	~90 KB	~60 KB
Einfaches Logo 512×512 (Flachfarben)	~40 KB	~18 KB	~10 KB	~7 KB
Icon 64×64 mit Transparenz	Nicht unterstuetzt	~2 KB	~1 KB	~0,8 KB

Die Entscheidungsregeln, die 2026 gelten

Die Entscheidungsregeln, die 2026 gelten bei JPG vs PNG fuers Web: JPG (oder WebP) fuer Fotos; PNG wenn Sie scharfe UI-Kanten oder Transparenz brauchen die Fotoformate noch schlecht handeln.

Fotografie mit Transparenz (freigestelltes Motiv auf transparentem Hintergrund). → PNG - JPG kann Alpha nicht darstellen. Bevorzugen Sie WebP, wenn Ihre Zielgruppe keine alten E-Mail-Clients und alten Android-WebViews einschliesst.

Screenshot von UI, Code oder Text. → PNG als kanonisch; WebP lossless als verbessert. Scharfe Pixelraender (Text-Antialiasing, UI-Raender) decken JPG-Komprimierungsartefakte bei jeder Qualitaet unter 90 auf, und JPGs mit Qualitaet 90 sind groesser als das aequivalente PNG.

Logo oder einfache Grafik. → SVG, wenn Sie die Vektorquelle haben (siehe PNG vs SVG-Anleitung). Wenn nur ein Raster existiert, gewinnt PNG bei der Schaerfe; WebP lossless als verbessert.

E-Mail-Newsletter-Header. → Nur JPG oder PNG. Viele E-Mail-Clients rendern WebP/AVIF nicht. Verwenden Sie das universelle Format, auch wenn ein moderner Codec Bytes sparen wuerde.

Qualitaets-vs-Groessen-Sweetspots

JPG Qualitaet 82 ist der Web-Standard, der ein Jahrzehnt lang funktioniert hat. Unter 75 werden Komprimierungsartefakte auf detailreichen Fotos sichtbar; ueber 90 waechst die Dateigroesse schnell mit minimalem visuellen Gewinn.

Progressives JPG ist eine Umordnung derselben Bilddaten - gleiche Qualitaet, gleiche Groesse, aber der Browser kann eine niedrigaufloesende Vorschau anzeigen, sobald die erste Scanline-Gruppe heruntergeladen ist. Verwenden Sie progressive Codierung fuer jedes Above-the-Fold-Hero-Foto.

PNG-Optimierer (pngquant, oxipng, zopflipng) koennen 30-70% von einem Standard-PNG-Export ohne Qualitaetsverlust abzwacken - sie suchen nach besseren Filter-/Komprimierungsparametern, als der Encoder versucht hat. Fuehren Sie immer Optimierung aus, bevor Sie ein grosses PNG in die Produktion senden.

Qualitaet waehlen: ein konkretes Ziel

Qualitaet waehlen: ein konkretes Ziel fuer JPG vs PNG fuers Web - starten Sie JPG etwa bei Qualitaet 75-85 fuer Heroes, dann Bytes und Artefakte vergleichen bevor Sie eine schwerere Datei shippen.

Die <picture>-Fallback-Kette

Die picture Fallback-Kette bei JPG vs PNG fuers Web liefert zuerst WebP oder AVIF, dann JPG oder PNG, damit alte Browser noch ein lesbares Bild ohne leeren Slot bekommen.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Beschreibung" width="1920" height="1080">
</picture>

Der Browser waehlt die erste source, die er decodieren kann. Das <img> ist der universelle Fallback. Inkludieren Sie immer width und height, um kumulative Layout-Verschiebung zu verhindern.

Wann PNG auf WebP oder AVIF aktualisieren

WebP lossless ist ein direkter Ersatz fuer PNG mit ~25-35% Dateigroesseneinsparungen bei den meisten Inhalten. Browser-Unterstuetzung ist seit Safari 14 (2020) universell. Wenn Ihre Zielgruppe nur-Browser ist (nicht E-Mail-lastig), ersetzt eine einzelne WebP-Lossless-Datei das PNG ohne visuellen Unterschied. AVIF lossless komprimiert weiter, hat aber langsamere Codierungszeiten und wurde erst in Safari 16 (2022) hinzugefuegt.

Fuer Fotografien entspricht AVIF bei Qualitaet 50-60 typischerweise JPG-Qualitaet 85 bei der Haelfte der Dateigroesse. Der Kompromiss ist die Codierungszeit (AVIF ist 10-30× langsamer zu codieren als JPG) und Hardware-Decodierungsunterstuetzung auf aelteren Geraeten.

Konvertieren zwischen Formaten

Konvertieren zwischen Formaten fuer JPG vs PNG fuers Web: Image Converter oeffnen, Ziel waehlen und Transparenz pruefen - ein PNG-Logo nach JPG kann eine ungewollte weisse Box malen.