PNG vs. JPG: Wann du welches Format verwenden solltest (mit Beispielen)
Der Hauptunterschied: Wie die Formate die Komprimierung handhaben
PNG und JPG sind nicht austauschbar. Sie lösen unterschiedliche Probleme. JPG (oder JPEG) verwendet eine verlustbehaftete Komprimierung, was bedeutet, dass es die Dateigröße reduziert, indem es unwiderruflich Pixeldaten verwirft. Jedes Mal, wenn du ein JPG speicherst, sucht ein Algorithmus nach ähnlich gefärbten Pixeln, gruppiert sie und bildet einen Durchschnittswert. Du erhältst eine kleinere Datei, riskierst aber sichtbare Artefakte, wenn du die Komprimierung zu stark ausreizt. In Photoshop kann eine Qualitätseinstellung von 80 (Datei > Exportieren > Exportieren als) die Dateigröße bei Fotos um 60–70 % reduzieren, fast ohne sichtbare Verluste. Wenn du die Qualität aber auf 40 senkst, siehst du blockartige Quadrate – das nennt man Makroblocking – besonders in kontrastreichen Bereichen wie bei Text auf einem Hintergrund. PNG ist das Gegenteil: Es verwendet eine verlustfreie Komprimierung. Jedes einzelne Pixel bleibt erhalten, genau wie es war. Der DEFLATE-Komprimierungsalgorithmus findet einfach sich wiederholende Muster in den Daten und speichert sie effizienter, ohne etwas zu verwerfen. Öffne ein PNG, speichere es, öffne es erneut – die Pixel sind identisch. Das macht PNG zur einzigen Wahl, wenn perfekte Wiedergabetreue nicht verhandelbar ist. Was das in der Praxis bedeutet: Ein 4000×3000 Pixel großes Foto einer Berglandschaft ist als hochwertiges JPG vielleicht 3–5 MB groß. Als PNG könnte dasselbe Bild auf 25–40 MB anwachsen. Bei einem Foto bringt dir diese zusätzliche Größe praktisch keinen sichtbaren Vorteil. Aber nimm einen 1200×800 Pixel großen Screenshot einer Tabelle. Als JPG wird der Text selbst bei Qualität 75 verschmiert sein und du wirst Farbsäume an den Zellrändern sehen. Als PNG bleibt er gestochen scharf und ist vielleicht nur 300–500 KB groß. Deine Formatwahl sollte immer eine bewusste Entscheidung sein, die auf dem Inhalt basiert, und nicht nur eine Gewohnheit.
Wann JPG die richtige Wahl ist
JPG wurde für Fotografien entwickelt, und das ist immer noch seine Domäne. Die verlustbehaftete Komprimierung des Formats nutzt geschickt eine Eigenheit der menschlichen Wahrnehmung aus: Unsere Augen reagieren viel empfindlicher auf Helligkeitsänderungen als auf feine Farbverschiebungen. Fotos sind voller gradueller Tonwertverläufe – ein Himmel, der von tiefem Blau zu Blassblau übergeht, oder Hauttöne, die sich in weichem Licht verändern. JPG komprimiert diese Bereiche aggressiv, und meistens bemerken wir es nicht einmal. Greif zu JPG für: **Kamerafotos für das Web.** Denk an Produktfotos auf einer E-Commerce-Seite, Hero-Images in einem Blog oder deine Urlaubsfotos auf Instagram. Mit einer Qualitätseinstellung von 75–85 schrumpft ein typisches DSLR-Foto auf unter 500 KB und sieht bei normalen Bildschirmgrößen identisch mit dem Original aus. **Jedes Bild, bei dem die Dateigröße oberste Priorität hat.** Dazu gehören E-Mail-Anhänge, in PDFs für den Vertrieb eingebettete Bilder und Thumbnails. Googles PageSpeed-Richtlinien empfehlen, Bilder möglichst unter 200 KB zu halten. Bei Fotos ist JPG der schnellste Weg dorthin. **Bilder, die wirklich final sind.** Da die JPG-Komprimierung verlustbehaftet ist, verschlechtert jeder Speichervorgang die Datei. Wenn du iterativ an einem Bild arbeitest, suchst du geradezu nach Problemen, wenn du es immer wieder als JPG speicherst. Behalte deine Master-Datei in einem verlustfreien Format (wie PNG, TIFF oder dem RAW-Format einer Kamera) und exportiere erst im allerletzten Schritt nach JPG. Die große, nicht verhandelbare Einschränkung von JPG ist die Transparenz. Das Format unterstützt sie nicht. Wenn du ein Produktfoto auf verschiedenfarbige Hintergründe legen musst, ist JPG nicht das richtige Werkzeug. Du musst PNG oder WebP verwenden.
Wann PNG die richtige Wahl ist
PNG glänzt genau da, wo JPG strauchelt, dank seiner verlustfreien Komprimierung und der vollen Unterstützung für Transparenz. **Screenshots und als Standbilder exportierte Bildschirmaufnahmen.** Jeder, der schon einmal versucht hat, verschwommenen Text in einem Tutorial-Screenshot zu lesen, kennt den Schmerz, JPG für den falschen Zweck zu verwenden. Text auf einem Bildschirm ist kontrastreich und scharfkantig. Die JPG-Komprimierung metzelt ihn regelrecht nieder und erzeugt selbst bei hohen Qualitätseinstellungen Farbsäume und Unschärfe. Ein Screenshot von einem Code-Editor, einem UI-Mockup oder einem Finanz-Dashboard muss ein PNG sein. **Logos, Icons und Illustrationen mit flächigen Farben.** Wenn du ein Firmenlogo hast, das auf verschiedenfarbigen Hintergründen platziert werden soll, brauchst du ein transparentes PNG. Der Export einer Vektorillustration aus Illustrator (Datei > Exportieren > Exportieren als > PNG) bewahrt jede klare Linie. Derselbe Export als JPG würde einen weißen Hintergrund erzwingen und unscharfe Kanten erzeugen. **Bilder, die weiter bearbeitet werden sollen.** Wenn du eine Datei an einen Designer weitergibst, der sie zusammenfügen, maskieren oder anpassen muss, schick ein PNG. Seine verlustfreie Natur bedeutet, dass keine Qualität verloren geht, wenn die Datei in verschiedenen Programmen geöffnet und gespeichert wird. **Bilder mit großen, einfarbigen Flächen.** Infografiken, Diagramme und Schaubilder sind perfekt für PNG. Der DEFLATE-Komprimierungsalgorithmus ist unglaublich effizient bei der Verarbeitung großer, sich wiederholender Blöcke einer einzigen Farbe. In diesen Fällen kann ein PNG manchmal sogar kleiner sein als ein JPG und dabei unendlich viel besser aussehen. Wo ist also der Haken bei PNG? Die Dateigröße, aber nur bei fotografischen Inhalten. Ein 24-Bit-PNG eines detailreichen Fotos wird fast immer viel größer sein als ein gutes JPG, ohne dass ein sichtbarer Qualitätsunterschied besteht. Bei Fotos lohnt sich diese zusätzliche Größe selten.
Direkte Vergleiche mit echten Zahlen
Abstrakte Vergleiche sind eine Sache, aber Zahlen machen die Kompromisse greifbar. Schauen wir uns drei konkrete Beispiele mit echten Dateigrößen an. **Beispiel 1: Produktfoto (2400×1600 px, Kamerafoto von Laufschuhen)** - JPG bei Qualität 85: 487 KB – sauber, keine sichtbaren Artefakte - JPG bei Qualität 60: 198 KB – leichte Unschärfe in der Textur, aber für ein Thumbnail in Ordnung - PNG (24-Bit): 6,2 MB – identisch mit dem Original, aber 12-mal größer als das JPG mit Qualität 85 Fazit: JPG gewinnt deutlich. Das PNG bietet keinen visuellen Vorteil und wäre eine Katastrophe für die Ladezeiten der Seite. **Beispiel 2: UI-Screenshot (1440×900 px, Webbrowser mit textlastiger Seite)** - JPG bei Qualität 85: 312 KB – merkliche Farbsäume um schwarzen Text, besonders bei kleinen Schriftarten - JPG bei Qualität 95: 890 KB – Farbsäume sind reduziert, aber bei 12-px-Fließtext immer noch sichtbar - PNG (24-Bit): 418 KB – gestochen scharfer Text, null Artefakte Fazit: PNG ist der klare Gewinner. Es ist sogar kleiner als das JPG mit der höchsten Qualität und sieht viel besser aus. **Beispiel 3: Firmenlogo (800×400 px, flaches Design mit transparentem Hintergrund)** - JPG bei Qualität 90: 45 KB – erzwingt einen weißen Hintergrund, keine Transparenz; Kanten sind weich - PNG (24-Bit mit Alpha): 38 KB – perfekte Transparenz, scharfe Kanten Fazit: Keine Frage. Das PNG ist kleiner und das einzige Format, das die Aufgabe überhaupt erfüllen kann, da JPG keine Transparenz unterstützt. Diese Zahlen variieren je nach Bildinhalt, aber die Muster, die du hier siehst, gelten für Tausende von realen Dateien.
Konvertierung zwischen PNG und JPG: Was du erwarten kannst
Räumen wir mit einem verbreiteten Irrtum auf: Die Konvertierung eines JPG in ein PNG stellt verlorene Daten nicht auf magische Weise wieder her. Wenn ein Foto als JPG mit Qualität 70 gespeichert wurde, sind seine Daten für immer verloren. Die Konvertierung dieser Datei in ein PNG gibt dir nur eine perfekte, verlustfreie Kopie eines bereits beschädigten Bildes. Du hast die Artefakte konserviert, nicht entfernt. Die Datei wird viel größer, aber nicht besser. Die Konvertierung von PNG zu JPG ist jedoch ein üblicher und nützlicher Schritt, wenn du ein Foto von der Bearbeitung zur finalen Bereitstellung im Web überführst. Hier wendest du die JPG-Komprimierung zum ersten Mal an und hast so die Kontrolle über die endgültige Qualität. Mit dem PNG-zu-JPG-Konverter von CocoConvert kannst du zum Beispiel eine Qualitätsstufe von 1 bis 100 wählen. Ich finde, Qualität 82 ist ein guter Ausgangspunkt für die meisten Fotos. Wann würdest du ein JPG in ein PNG konvertieren? Das ist selten, aber es gibt Szenarien. Vielleicht musst du einem bestehenden Foto einen transparenten Hintergrund hinzufügen (obwohl du für das Maskieren selbst ein anderes Tool brauchst). Oder du archivierst alte Fotos und willst jede weitere Verschlechterung aufhalten. Denk nur daran, dass der Komprimierungsschaden vom ursprünglichen Speichern als JPG bereits eingebrannt ist. Wo ein Tool wie CocoConvert wirklich zum Zeitsparer wird, ist bei der Stapelverarbeitung. Wenn du 200 PNG-Produktfotos von einem Designer hast und sie auf eine Website bringen musst, ist es eine Rettung, sie alle auf einmal in JPG mit Qualität 80 zu konvertieren. Der Batch-Upload von CocoConvert verarbeitet 50 Dateien im kostenlosen Tarif und 500 im Pro-Tarif. Es überwacht aber keinen Ordner und bietet keine API; für diesen Automatisierungsgrad müsstest du dir ImageMagick-Skripte oder einen Dienst wie Cloudinary ansehen.
Und was ist mit WebP, AVIF und anderen modernen Formaten?
PNG und JPG haben das Web über zwei Jahrzehnte lang beherrscht, aber ihre Herrschaft wird nun in Frage gestellt. WebP, von Google entwickelt, wird mittlerweile von allen gängigen Browsern unterstützt (Chrome, Firefox, Safari 14+, Edge). Es ist ein flexibles Format mit sowohl verlustbehafteten als auch verlustfreien Modi. Im verlustbehafteten Modus ist eine WebP-Datei typischerweise 25–35 % kleiner als ein JPG von vergleichbarer visueller Qualität. Im verlustfreien Modus ist sie oft 20–30 % kleiner als ein PNG. AVIF ist noch neuer und treibt die Komprimierung weiter voran, wodurch oft Dateien entstehen, die 40–50 % kleiner sind als JPGs. Es basiert auf dem AV1-Video-Codec und kann auch HDR-Inhalte hervorragend verarbeiten. Die Browser-Unterstützung ist inzwischen durchweg solide (Chrome 85+, Firefox 93+, Safari 16+), aber der Kodierungsprozess ist langsamer und die Tools sind noch nicht ganz so ausgereift. Warum konzentrieren wir uns also immer noch so sehr auf PNG und JPG? Erstens, die universelle Kompatibilität. JPG und PNG funktionieren *überall*, einschließlich uralter E-Mail-Clients und Offline-Software. Zweitens, die Vertrautheit. Die meisten Kunden und Anbieter erwarten JPG oder PNG und wüssten vielleicht gar nicht, was sie mit einer WebP-Datei anfangen sollen. Und schließlich sind viele professionelle Workflows, von Stockfoto-Seiten bis hin zu Print-on-Demand-Diensten, immer noch ausschließlich auf den Upload von JPG und PNG ausgelegt. CocoConvert unterstützt die Konvertierung von und zu WebP, was ein großartiges Feature ist. Mein Rat: Wenn du ein modernes Webprojekt aufbaust und den gesamten Technologie-Stack kontrollierst, solltest du WebP als Ausgabeformat in Betracht ziehen, während du deine Master-Quelldateien als hochwertige JPGs oder PNGs behältst. Die AVIF-Konvertierung steht auf der Roadmap von CocoConvert, ist aber noch nicht verfügbar.
Eine praktische Entscheidungshilfe
Okay, das waren jetzt viele technische Details. Lass uns das Ganze auf einen einfachen Entscheidungsprozess herunterbrechen, der die meisten Situationen abdeckt. **Schau dir zuerst deinen Inhalt an:** - Ist es ein Foto oder ein fotorealistisches Bild? → Verwende JPG, es sei denn, du brauchst unbedingt Transparenz. - Ist es ein Screenshot, Diagramm, Logo oder eine Illustration mit scharfen Linien? → Verwende PNG. - Benötigt es zwingend einen transparenten Hintergrund? → Verwende PNG (oder WebP für die reine Browser-Nutzung). **Bedenke als Nächstes den Verwendungszweck:** - Webseite, bei der Geschwindigkeit entscheidend ist? → JPG mit Qualität 75–85 für Fotos; PNG für Grafiken; ziehe WebP in Betracht, falls unterstützt. - Druck oder Langzeitarchivierung? → PNG oder TIFF. Verwende niemals JPG für eine Datei, die du erneut bearbeiten willst. - E-Mail-Anhang? → JPG für Fotos (versuche, unter 1 MB zu bleiben); PNG für Screenshots. - Social Media? → JPG für Fotos (die Plattformen komprimieren es sowieso neu); PNG für jede Grafik mit Text. **Und bitte versuche, diese häufigen Fehler zu vermeiden:** - Ein Logo als JPG speichern und sich wundern, warum es verschwommen ist. - Riesige PNGs für alle Website-Fotos verwenden und sich wundern, warum die Seite so langsam ist. - Ein minderwertiges JPG in ein PNG konvertieren und erwarten, dass es besser aussieht. - Die JPG-Qualität unter 70 schrauben und von den blockartigen Artefakten an scharfen Kanten überrascht sein. Wenn du mal wirklich nicht weiterweißt, hier die Entscheidungshilfe: Exportiere je eine Version, öffne sie und zoome auf 100 %. Schau dir den schärfsten Teil des Bildes an. Wenn das JPG sauber aussieht, passt alles. Wenn du Unschärfe oder seltsame Farben siehst, brauchst du PNG. Ein Tool wie der Konverter von CocoConvert erledigt den mechanischen Teil des Formatwechsels perfekt. Was es nicht kann, ist die strategische Entscheidung für dich zu treffen. Dazu musst du wissen, was dein Bild ist und wohin es soll. Dieses Framework sollte diese Entscheidung deutlich einfacher machen.