Auf Webseiten haben sich die Bildformate PNG, JPG, GIF und SVG als die führenden Bildformate durchgesetzt. Doch welches Format benutzt man in welcher Situation? Wir haben die verschiedenen Formate anhand von Beispielen analysiert und zeigen die Unterschiede.

Als einfachen Test zum Vergleich der Formate haben wir ein und das selbe Foto in verschiedenen Dateiformaten abgespeichert.

Bildformate für Fotos und realitätstreue Grafiken

JPG (auch JPEG)

JPG ist ein Bildformat für Fotorealistische. Durch Kompression und Vereinfachung der Bilder verschlechtert sich die Qualität, allerdings ist dies oberhalb von 60% Kompressionsstufe kaum sichtbar und reicht für die meisten Verwendungen im Internet.

JPG Bild im Vergleich zu PNG
Bildformat: JPG Auflösung: 1024x768px; Größe: 170kb

PNG

Die PNG Variante des gleichen Bildes ist erheblich größer. Qualitativ ist kein Unterschied erkennbar.

Bildformat: PNG Auflösung: 1024x768px; Größe: 543kb
Bildformat: PNG Auflösung: 1024x768px; Größe: 543kb

GIF

GIF ist ein älteres Format für Bilder mit Transparenzen. Die Nachteile von GIF gegenüber PNG bestehen in der Abbildung von Transparenzen. Hier punktet PNG klar durch echte Alphakanäle, während GIF „Blitzer zeigt. Ein echter Vorteil von Gif ist, das Bilder animiert werden können.

Animiertes GIF
Bildformat: GIFAuflösung: 1024x768px; Größe ohne Animation: 543kb

Bildformate für Grafiken

Bei Grafiken dreht sich der Wind. Hier ist unter den Pixelbasierten Formaten JPG der klare Verlierer und PNG der Gewinner. Aufgrund der Speicherungslogik hat PNG klare Vorteile beim Speichern von Grafiken, da diese meisten aus farblich einheitlichen Pixelflächen zusammengesetzt werden.

JPG

Wie man im Beispiel sofort erkennen kann, scheidet JPG als Bildformat für Logos sofort aus. Im Unterschied zu den anderen Bildern ist hier keine Transparenz vorhanden, was das Format für die meisten Logo-Anwendungen unbrauchbar macht.

Logo im JPG Format
Auflösung: 150x150px Format: JPG Größe: 7,29kb

PNG

Das PNG Format besitzt bereits den Alphakanal für die Tranparenz. Weiterhin ist das Bildformat nur halb so groß. Ein echter Vorteil gegenüber JPG.

Auflösung: 150x150px Format: PNG Größe: 3,65kb
Auflösung: 150x150px Format: PNG Größe: 3,65kb

SVG

SVG ist der Mercedes unter den Icon Formaten. Bei diesem Format handelt es sich allerdings nicht um ein pixelbasiertes Bildformat, sondern um ein Vektoren-Basiertes Format. Dies hat unschätzbaren Vorteil, dass eine Datei für alle Anwendungsgrößen verwendet werden kann, da die Grafik in jedem Browser neu berechnet werden kann.

Auflösung: nach Vorgabe Format: SVG Größe: 1,77kb
Größe: hier 150px Format: SVG Größe: 1,77kb
Auflösung: nach Vorgabe Format: SVG Größe: 1,77kb
Größe: hier 350px Format: SVG Größe: 1,77kb

WebP – Googles schnelles Internetformat

Erst 2010 gab Google das Format webp frei, welches leider noch nur auf modernen Browsern funktioniert. Das Format ist als Internet Dateiformat gedacht und schafft es, Bilder bei vergleichbarer Auflösung wie jpeg bei geringerer Dateigröße zu speichern. Daher ist es als als Bildformat für Webseiten gut geeignet. Es sollte jedoch ein Fallback zu jpg pder png Bildern geben, sodass auch ältere Browser die Bilder anzeigen können. Das Format ist zur Umwandlung von jpeg, png und gif geeignet, weil es auch bei hoher Kompression besser als jpg ist und verlustfreie Transparenz, sowie Animationen beherrscht.

Fazit

  • Für alle Fotorealistischen Bilder ohne Transparenzen ist JPG das beste Format.
  • Kommen Transparenzen hinzu, lässt sich PNG nicht vermeiden.
  • Das GIF Format ist heute nur noch verbreiet zur Bildinternen Animation.
  • Wenn Grafiken verlustfrei und besonders simpel eingebunden werden sollen, ist SVG der Königsweg.
  • Alle JPG, PNG und GIF Formate sollten im Zuge der Geschwindigkeistoptimierung der Webseite in webp umgewandelt werden.