Bilder und Grafiken im Web – Tipps zu Bildformaten

JPEG, PNG und SVG – Wann verwende ich welches Bildformat?

Trotz der etlichen digitalen Bildformate, die heute existieren, hat man sich in der modernen Webentwicklung inoffiziell auf drei Dateiformate geeinigt: JPEG, PNG und SVG. Jedes der Formate hat ganz spezielle Vor- und Nachteile und deckt eigene Anwendungsgebiete ab. Oft überschneiden sich die Anwendungsgebiete und es lassen sich mehrere Formate für denselben Zweck verwenden. Doch woher weiß man, wann ein JPEG oder PNG verwendet werden sollte und wann sich der Einsatz einer SVG-Grafik lohnt? Wir nehmen die drei Formate in diesem Beitrag etwas genauer unter die Lupe.

JPEG als Bildformat auf Webseiten

Das JPEG ist das wohl am häufigsten verwendete Bildformat im Internet. Und das aus gutem Grund. Die JPEG-Komprimierung erlaubt es, selbst komplexe Fotografien und detaillierte Grafiken auf kleine Datenmengen herunterzurechnen. Das wirkt sich positiv auf die Ladezeit einer Webseite aus. Außerdem lässt sich die Qualität der JPEG-Komprimierung in den meisten Bildbearbeitungsprogrammen relativ frei skalieren: Möchte man besonders hohe Qualität und nimmt dafür höhere Datenmengen in Kauf, oder liegt einem die Ladezeit der Webseite mehr am Herzen? Der Web-Entwickler hat hier die freie Wahl.

Leider ist das JPEG-Bildformat nicht fehlerfrei. Die Komprimierung einer JPEG-Datei ist verlustbehaftet, das bedeutet, bei jedem erneuten Speichern gehen wichtige Bildinformationen verloren und die Qualität leidet. Das Speichern eines Bildes als JPEG sollte also immer erst ganz am Ende eines Bearbeitungsprozesses geschehen. Während der Bildbearbeitung sollten verlustfreie Bildformate (bspw. PNG) verwendet werden.

Der Qualitätsverlust der JPEG-Komprimierung zeigt sich besonders in Bildern mit starken Kontrasten. An den Übergangskanten zwischen zwei Farbflächen sind, besonders bei niedriger Qualität, Bild-Artefakte zu erkennen. Das sind Verunreinigungen der Bildqualität, verursacht durch die Komprimierung.
Außerdem unterstützt das JPEG-Format keine transparenten Farbwerte. Für einige Anwendungsbeispiele ist das bereits ein Ausschlusskriterium. Beispielsweise, wenn man das JPEG auf einem Hintergrund mit Farbverlauf platzieren möchte.

Die 16 Bit Farbtiefe, die den meisten JPEG-Formaten zugrunde liegt, reicht für normale Fotografien und Grafiken komplett aus. Bei Fotografien mit sehr schwachen Verläufen, beispielsweise vom Himmel oder anderen, großen, einfarbigen Farbflächen, kann man die Limitierungen des 16-Bit-Farbraums manchmal aber erkennen. Dann sollte auf ein Format ausgewichen werden, das 24 Bit oder 32 Bit unterstützt, beispielsweise das PNG oder TIFF.

PNG für hochwertige Grafiken und Bilder

Das PNG-Format hat eine weniger effiziente Kompression als das JPEG, wodurch PNG-Bilder in aller Regel die größere Datenmenge haben. Dafür bietet das PNG aber auch eine bessere Bildqualität und Features, die andere Formate nicht unterstützen.

PNG-Bilder besitzen einen Alpha-Kanal für Transparenzen, wodurch weiche Schlagschatten und dynamische Übergänge zwischen Bild und Hintergrund möglich werden. Außerdem kann das PNG dank der 24 Bit Farbtiefe deutlich mehr Farben anzeigen, als das JPEG. Erkennbare Abstufungen in Farbverläufen, wie das bei manchen JPEG-Bildern der Fall ist, gibt es beim PNG nicht. Grundsätzlich gilt daher: Das PNG bietet die beste Bildqualität und einen sehr großen Farbbereich.

Der Preis für die gute Bildqualität und die Transparenzen ist die größere Datenmenge. Bei sehr großen Bildern oder übermäßiger Verwendung von PNG-Bildern kann die Ladezeit einer Webseite in die Knie gehen. Bilder im PNG-Format sollten daher immer mit Bedacht eingesetzt werden. Ist Transparenz oder eine besonders gute Bildqualität nicht unbedingt nötig, sollte auf JPEG zurückgegriffen werden. Das schont die Nerven und mobiles Datenvolumen der Besucher.

SVG – kleinste Datenmenge, eingeschränkte Anwendungen

Die SVG-Grafik ist – im Gegensatz zu JPEG und PNG – keine Pixelgrafik, sondern gehört zu den vektorbasierten Formaten. Die Dateigröße steht bei vektorbasierten Formaten nicht in direktem Zusammenhang mit der Größe/Auflösung der Grafik und fällt in der Regel deutlich kleiner aus, als die pixelbasierten JPEG- und PNG-Bilder.

Ein weiterer Vorteil der vektorbasierten Bildformate ist, dass diese sich beliebig groß oder klein skalieren lassen, ohne dass das zu einem Qualitätsverlust führt. Das kann ein großer Vorteil sein.
Leider ist das SVG-Format aber auch kein Allheilmittel. Vektorbasierte Formate können nur für weniger-komplexe Grafiken verwendet werden. Fotografien und Gemälde besitzen einen viel zu hohen Detailreichtum für die Konvertierung in ein vektorbasiertes Bildformat.

Für Logos, Icons und Diagramme eignet sich das SVG-Format aber hervorragend. Häufig verwendet man sogenannte Sprite-Grafiken, in denen alle Icons und Logos einer Webseite in einer einzelnen Datei zusammengefasst werden. Dadurch wird die Dateigröße je Icon auf ein Minimum reduziert. Die Ladezeit einer Webseite wird dadurch enorm entlastet.

Alles auf einen Blick

Liegen einem Ladezeiten und Performance einer Webseite am Herzen, sollte so oft, wie möglich, auf SVG zurückgegriffen werden. Typische Verwendungszwecke sind Icons, Logos und Diagramme.

Wenn die Art der Grafik den Einsatz einer vektorbasierten SVG-Grafik nicht gestattet, muss abgewogen werden, welches der beiden Formate JPEG und PNG sich besser eignet.
JPEG kann in großen Mengen für Bildergalerien oder bildschirmfüllende Fotografien verwendet werden. Beim Arbeitsprozess sollte aber darauf geachtet werden, niemals JPEG als Ausgangsformat zu verwenden.

Das PNG bietet die beste Bildqualität und kann dank der verlustfreien Komprimierung auch während des Arbeitsprozesses verwendet werden. Die Möglichkeit der transparenten Farbflächen und Schattierungen macht das PNG weitaus flexibler, als das JPEG. Es sollte aber in Maßen verwendet werden, um die Ladezeit zu schonen. Typische Anwendungsgebiete sind besonders kontrast- und detailreiche Bilder, Kunst und Landschaftsfotografie und freigestellte Bilder mit transparenten Hintergründen.