JPG vs PNG fuer das Web - wann welches Bildformat verwenden

Veroeffentlicht 20. April 2026

---

JPG und PNG waren von 1996 bis in die 2010er Jahre die beiden dominierenden Web-Bildformate und sind immer noch die Formate, die jeder Browser, jede Bildbibliothek und jede Stock-Seite ohne Vorbehalt unterstuetzt. Die Aufteilung ist im Prinzip einfach - JPG fuer Fotos, PNG fuer alles mit scharfen Kanten oder Transparenz - aber die wirklichen Entscheidungen heute betreffen Dateigroesse, eine moderne WebP/AVIF-Fallback-Kette und ob ein PNG-Screenshot zu schwer ist, um versendet zu werden. Diese Anleitung deckt die Codierungsmechanik, die Entscheidungsregeln, die 2026 gelten, und den Aktualisierungspfad zu modernen Formaten ab.

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

Die Entscheidungsregeln, die 2026 gelten

Fotografie, randlos, keine Transparenz noetig. → JPG (Qualitaet 80-85) als Grundlage; WebP/AVIF als verbesserte Varianten. Ein JPG bei q=82 ist visuell vom verlustfreien Original fuer alle ausser den am besten geschulten Augen nicht zu unterscheiden. Die Datei ist 5-10× kleiner als ein PNG desselben Fotos.

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

Unser JPEG-Komprimierungslevel-Pruefer inspiziert ein existierendes JPG und meldet seine Quantisierungstabelle. Verwenden Sie ihn, um zurueckzuentwickeln, mit welcher Qualitaet ein Foto gespeichert wurde, bevor Sie es neu codieren. Daumenregel: ein Foto, das mehr als zweimal mit Qualitaet 82 neu codiert wurde, verliert sichtbare Details; wenn Sie der dritte Hop in einer Kette sind, erhoehen Sie die Qualitaet auf 90, um Spielraum fuer ein zukuenftiges Neuspeichern zu bewahren.

Die <picture>-Fallback-Kette

Moderne Seiten liefern eine AVIF- oder WebP-Variante an Browser, die sie decodieren koennen, und fallen fuer den Rest auf JPG oder PNG zurueck:

<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

Verwenden Sie unser Bild komprimieren-Tool fuer JPG-Neucodierung mit KI-abgestimmter Qualitaet. Fuer Formatkonvertierung in die andere Richtung verfolgt PNG zu SVG PNG-Logos in Vektoren; SVG zu PNG rastert einen Vektor in expliziter Pixelgroesse. Alle Konvertierungen laufen im Browser - nichts wird hochgeladen.

Verwandte Tools

• Bild Komprimieren - reduzieren Sie JPG/PNG-Dateigroesse mit KI-Qualitaetsabstimmung.
• JPEG-Komprimierungslevel-Pruefer - inspizieren Sie die gespeicherte Qualitaet eines JPG.
• Bild Groesse aendern - setzen Sie exakte Pixeldimensionen mit bikubischer Interpolation.
• Insights Bild-Optimierer - PageSpeed-orientiertes Bild-Audit.

← Zurueck zu Bild-Tools