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 JPG und PNG Pixel unterschiedlich komprimieren

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.

JPG-vs-PNG-Dateigroessenvergleich 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 JPG-vs-PNG-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.

JPG-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.

Tiefe: der PNG-Bittiefen-Schalter, der die Groessenrechnung umdreht

Ein Detail, das JPG gegen PNG entscheidet, wird selten ausgesprochen: PNG selbst kommt in zwei sehr unterschiedlichen Varianten, und die falsche zu waehlen ist der Grund, warum sich eine Beschwerde ueber ein "zu grosses verlustfreies PNG" meist auf die Exporteinstellungen statt auf das Format zurueckfuehren laesst. Ein 24-Bit-Truecolor-PNG (oft als PNG-24 bezeichnet) speichert jeden Pixel als volles RGB, waehrend ein 8-Bit-indiziertes PNG (PNG-8) eine Palette von bis zu 256 Farben plus einen kleinen Index pro Pixel speichert. Fuer ein flaches Logo oder ein einfaches Icon aus nur einer Handvoll Farben kann ein erneuter Export als PNG-8 die Datei auf weniger als die Haelfte ihrer 24-Bit-Version verkleinern und landet haeufig unter dem entsprechenden JPG, waehrend jede Kante perfekt scharf bleibt. Die Transparenzgeschichte teilt sich genauso wie die Farbgeschichte: JPG traegt ueberhaupt keinen Alphakanal, das aeltere GIF-Format bietet nur 1-Bit-An-oder-Aus-Transparenz, und allein PNG unterstuetzt einen vollen 8-Bit-Alphakanal mit 256 Deckkraftstufen, was der einzige Weg ist, einen weichen Schlagschatten oder eine kantengeglaettete Kurve sauber vor jeder Hintergrundfarbe zu halten. Die eigentliche Regel hinter "Fotos werden JPG, Grafiken werden PNG" ist also dieser Handel: Wenn ein Bild wenige verschiedene Farben hat oder weiche Transparenz braucht, gewinnt PNG bei Groesse und Wiedergabetreue, und wenn es eine Halbtonfotografie ist, verdient sich JPG seinen Platz, indem es Details verwirft, die das Auge nie sieht, waehrend PNG gezwungen ist, jeden Pixel Byte fuer Byte zu speichern.