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.
In diesem Artikel
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.
PNG
Die PNG Variante des gleichen Bildes ist erheblich größer. Qualitativ ist kein Unterschied erkennbar.
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.
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.
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.
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.
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.
Über den Author: Bernhard Prange
Mein Name ist Bernhard ich bin Google Ads Freelancer mit starker technischer Affinität zu Online Shop Systemen. Schwerpunkte meiner Arbeit ist die Optimierung von Shopping Feeds und individuelle Automationen um große Produktsortimente bei Google Ads abzubilden.
Mehr Beiträge von Bernhard Prange