PNG oder JPG für Bilder auf der Website?

Die Formatwahl ist eine Geschwindigkeitsentscheidung

Bei Bildern auf Websites ist die Formatwahl keine Frage der Ästhetik, sondern der Performance. Was die Besucherin zu sehen bekommt, ist in beiden Formaten meist identisch; der Unterschied liegt darin, wie viele Bytes für dieses Bild zum Browser übertragen werden müssen. Enthält eine Seite Dutzende Bilder, kann eine falsche Formatwahl das Seitengewicht ohne Not vervielfachen.

In diesem Beitrag vergleichen wir PNG und JPG im Web-Kontext: Bei welchem Inhalt gewinnt welches Format, welche Fragen sollten Sie sich bei der Entscheidung stellen, und worauf müssen Sie bei einer Massenumwandlung achten?

Zuerst die Ausschlussfrage: Wird Transparenz benötigt?

Bevor der Vergleich beginnt, ist eine einzige Frage zu beantworten. Muss der Hintergrund des Bildes transparent sein?

Lautet die Antwort ja, ist die Entscheidung gefallen: JPG ist keine Option. In der Struktur des JPG-Formats ist kein Bestandteil namens Alphakanal definiert. Speichern Sie ein transparentes Bild als JPG, werden die transparenten Bereiche dauerhaft mit einer einheitlichen Farbe gefüllt – meist Weiß. Ihr Logo, das auf farbigem Untergrund stand, sitzt plötzlich in einem weißen Rechteck gefangen.

Lautet die Antwort nein, wird der Vergleich sinnvoll, und die Entscheidung fällt anhand des Inhaltstyps.

Der Inhaltstyp: der eigentlich entscheidende Faktor

Bei fotografischen Inhalten gewinnt JPG mit deutlichem Abstand. Landschaft, Porträt, Produktaufnahme, eine belebte Szene – bei solchen Bildern unterscheidet sich nahezu jedes Pixel von seinem Nachbarn. Die verlustfreie Kompression von PNG bleibt ineffizient, weil sie keine wiederkehrenden Muster findet. Dasselbe Foto kann als PNG ein Vielfaches der JPG-Version wiegen, und bei einer vernünftigen Qualitätsstufe ist der sichtbare Unterschied nahezu null. Für ein Blog-Titelbild, ein Teamfoto oder eine Produktaufnahme ein PNG zu verwenden bedeutet, die Seite zu beschweren, ohne der Besucherin irgendeinen Vorteil zu bieten.

Bei Grafik- und Textinhalten gewinnt PNG. Screenshots, Oberflächenentwürfe, Tabellen, Diagramme, Liniengrafiken oder Logos auf einfarbigem Grund enthalten große einfarbige Flächen. PNG packt diese sehr effizient. JPG verliert bei diesen Inhalten gleich doppelt: Es erzeugt Halos rund um scharfe Kanten und schlechter lesbaren Text, und weil scharfe Kanten hochfrequent sind, sinkt zugleich die Kompressionseffizienz – es sieht also mitunter schlechter aus und erzeugt dabei die größere Datei.

Die Grenzfälle. Manche Bilder sind eine Mischung aus beidem: ein Foto mit aufgesetztem Text oder eine Infografik, die Fotos enthält. Hier gilt die praktische Regel: Entscheiden Sie nach dem dominanten Charakter des Bildes. Nimmt das Foto den größten Teil der Fläche ein, wählen Sie JPG; überwiegen einfarbige Flächen und Text, wählen Sie PNG.

Wie wichtig der Größenunterschied tatsächlich ist

Das Seitengewicht wirkt sich direkt auf die Ladezeit aus, und die Ladezeit darauf, ob Besucherinnen auf der Seite bleiben. Besonders bei mobilen Verbindungen wird dieser Unterschied spürbar.

Entscheidend ist dabei nicht die Größe eines einzelnen Bildes, sondern die Summe. Enthält eine Produktübersicht zwanzig Produktfotos, multipliziert sich jede falsche Formatentscheidung mit zwanzig. Deshalb ist es weit effizienter, die Formatentscheidung nicht Bild für Bild, sondern auf Ebene der Bildkategorie zu treffen: Eine Regel wie „alle Produktfotos als JPG, alle Oberflächen-Icons als PNG" sorgt für Konsistenz und beseitigt zugleich die Entscheidungsmüdigkeit.

Fehler, die Sie bei der Umwandlung vermeiden sollten

Massenumwandlung ohne Unterscheidung. Alle PNG-Dateien in einem Ordner auszuwählen und in JPG umzuwandeln ist der häufigste Fehler. Die darunter liegenden transparenten Logos verwandeln sich klammheimlich in weiße Kästen, und meist merken Sie das erst, nachdem die Website online gegangen ist. Trennen Sie Dateien mit Transparenz vor der Umwandlung ab.

Ein bereits komprimiertes Bild erneut komprimieren. Wurde Ihr vorliegendes PNG in Wahrheit aus einem JPG erzeugt, fügt die erneute Umwandlung in ein JPG eine zweite verlustbehaftete Runde hinzu. Arbeiten Sie nach Möglichkeit immer mit der ursprünglichen Quelldatei.

Die Qualitätsstufe blind wählen. Setzen Sie die JPG-Qualität sehr hoch, verlieren Sie den Größenvorteil; setzen Sie sie zu niedrig, entstehen sichtbare Artefakte. Vergrößern Sie das Ergebnis nach der Umwandlung auf hundert Prozent und achten Sie besonders auf gleichmäßige Farbübergänge und scharfe Kanten.

Vergessen, dass es kein Zurück gibt. Der Weg von PNG zu JPG ist eine Einbahnstraße. Verlorene Transparenz und verworfene Details kommen nicht wieder; das JPG erneut in ein PNG umzuwandeln speichert lediglich den aktuellen Zustand verlustfrei. Löschen Sie deshalb die Original-PNG-Dateien nicht, sondern bewahren Sie sie auf. Für die Umwandlung Ihrer Dateien können Sie das Werkzeug zur Umwandlung von PNG zu JPG verwenden.

Ein praktischer Entscheidungsweg

Fragen Sie bei jedem Bild der Reihe nach: Wird Transparenz benötigt? Wenn ja, dann PNG, Entscheidung getroffen. Wenn nein: Ist der Inhalt ein Foto? Wenn ja, dann JPG. Wenn nein, handelt es sich um Text oder eine Grafik mit scharfen Kanten? Dann PNG. Ist es gemischt, entscheiden Sie nach dem dominanten Charakter.

Dieser dreistufige Ablauf trifft für die große Mehrheit der Webbilder die richtige Entscheidung und erspart Ihnen langes Nachdenken.

Zusammengefasst

PNG und JPG sind keine Konkurrenten, sondern Werkzeuge, die für unterschiedliche Aufgaben entworfen wurden. Bei Fotos ist JPG deutlich effizienter und erzeugt keinen sichtbaren Qualitätsverlust. In allen Fällen, in denen Transparenz gebraucht wird, und bei Bildern mit Text- und Grafikinhalt ist PNG die richtige Wahl. Wenn Sie die Geschwindigkeit Ihrer Website wirklich verbessern wollen, besteht die Aufgabe nicht darin, alle Bilder in ein einziges Format zu zwingen, sondern jedes Bild in das Format zu bringen, das zu seinem Inhaltstyp passt.