GIF, JPG, SVG, PNG oder doch lieber Webp? Wann du auf welches Bildformat setzen solltest
Alle wichtigen Bildformate im Vergleich. (Grafik: Shutterstock/Lucky clover)
Bei den vielen verschiedenen Bildformaten kann schon mal die Übersicht verloren gehen. Einige unterstützen Transparenz, andere haben ein großes Farbspektrum und wieder andere lassen sich nur verlustbehaftet komprimieren. Manche sind gut fürs Web, andere können nicht in jedem Browser richtig angezeigt werden. Der folgende Vergleich soll dich bei der richtigen Wahl unterstützen:
JPG, PNG, GIF, SVG oder Webp – die Unterschiede
| Bildformat | Kompression | Farbspektrum | Transparenz | Besonderheiten |
|---|---|---|---|---|
| JPG/JPEG | verlustbehaftet | ca. 16,8 Millionen Farben | Nein | - |
| GIF | verlustfrei | Maximal 256 Farben | Einfache Transparenz (Index) | Einfache Animationen |
| PNG-8 | verlustfrei | Maximal 256 Farben | 4-Bit-Transparenz mit 16 Stufen pro Pixel | Keine Animationen |
| PNG-24 | verlustfrei | ca. 16,8 Millionen Farben | Einfache Transparenz (Index) | - |
| PNG-32 | verlustfrei | ca. 16,8 Millionen Farben | Alpha-Kanal | - |
| SVG | verlustfrei | ca. 16,8 Millionen Farben | Alpha-Kanal | Vektorgrafiken lassen sich verlustfrei hochskalieren. Auch Animationen sind möglich. |
| Webp | verlustfrei | ca. 16,8 Millionen Farben (YUV420) | Alpha-Kanal | Animationen möglich |
| Webp | verlustbehaftet | ca. 16,8 Millionen Farben (RGBA) | Alpha-Kanal | Animationen möglich |
Für Fotografien: JPG und JPEG
Neben dem JPG-Format spucken qualitativ hochwertigere Kameras (beispielsweise Spiegelreflexkameras) auch Bilder im RAW-Format aus. Das Rohdatenformat, welches ohne Bearbeitung der Kamera, das heißt mit allen Rohdaten gespeichert wird und dadurch dem Fotografen eine detailliertere Bildbearbeitung ermöglicht, soll hier aber nicht unser Thema sein. Die größte Verbreitung finden fertige Fotografien schlussendlich im JPG-Format. Ein 16-Bit-Farbraum pro Pixel ist das Mindeste, in der hochwertige Bilder digital dargestellt werden sollten. Deswegen bietet das Format auch keine Unterstützung für Transparenzen an, da bei realen Fotos dies nicht benötigt wird und somit die Dateigröße eingespeichert werden kann.
Was ist eigentlich der Unterschied zwischen JPG und JPEG?
Um es kurz zu machen: Die beiden Ausdrücke meinen absolut das Gleiche. Das von der Joint Photographic Experts Group ins Leben gerufene Bildformat hatte ursprünglich die Dateiendung .jpeg. In früheren Windows-Versionen waren jedoch nur dreistellige Dateiendungen zulässig, wodurch unter der gleichen Bedeutung die Endung .jpg eingeführt wurde. Da jedoch Macintosh-Nutzer die ursprüngliche vierstellige Endung .jpeg nutzen konnten, werden beide bis heute gebraucht. Inzwischen sind auch unter Windows die mehrstelligen Endungen zulässig, wodurch auf beiden Betriebssystemen alle zwei Endungen immer wieder auftauchen.
Die verlustbehaftete Komprimierung ermöglicht außerdem eine starke Reduzierung der Dateigröße. Jedoch sollte man dabei immer die Original-Datei behalten, da bei der Komprimierung nicht nur redundante Daten entfernt werden, weswegen die ursprüngliche Qualität aus dem komprimierten Bild nicht wiederhergestellt werden kann.
Dafür solltet ihr JPG nutzen:
- Fotografien
- Bilder mit hoher Farbtiefe und Dynamik
- Mit Googles Webp (weiter unten) gibt es eine neue Alternative zu dem älteren JPG-Format
Das im Web verbreitete Bildformat GIF
Dank Social Media sind animierte GIF-Bildchen im Web sehr verbreitet. Genau das ist aktuell auch die einzig sinnvolle Verwendungsmöglichkeit des Formats: kleine Logos und Icons mit geringer Farbtiefe. Für andere Zwecke ist das Format aber nur bedingt empfehlenswert. Auf der einen Seite habt ihr nur die Möglichkeit einer Index-Transparenz, auf der anderen Seite ist euer Farbspektrum mit 256 Farben sehr eingeschränkt. Je nach Anwendung sind für Logos und Icons eher Vektorgrafiken zu empfehlen, da diese beliebig skaliert werden können, wodurch Responsive Design möglich ist.
Was ist eigentlich der Unterschied zwischen Index-Transparenz und einem Alpha-Kanal?
Ist von Index-Transparenz die Rede, dann wird pro Pixel nur ein Bit mit der Information Transparenz „ja“ oder „nein“ gespeichert. Schatten beispielsweise können damit also nur bedingt dargestellt werden, da ein realistischer Schatten in einem Logo zum Teil schwarz und nach außen hin immer transparenter wird. Genau diese Information kann mit einem Alpha-Kanal visualisiert werden. Ein typisches Farbmodell dafür ist RGBA (Rot, Grün, Blau und Alpha). Für jeden Bereich werden dann acht Bit pro Pixel gespeichert.
Dafür solltet ihr GIF nutzen:
- Kleine Animationen im Web (zum Beispiel für Social Media)
- Bedingt kleine Logos und Icons, häufig ist PNG oder SVG sinnvoller
PNG: Für mehr Transparenz
PNG-8 lässt sich mit GIF, die anderen Versionen mit JPG vergleichen. Der wesentliche Unterschied liegt in der besseren Transparenz und gegenüber dem JPG-Format in einer verlustfreien Komprimierung.
PNG-8: Die GIF-Alternative ohne Animationen
PNG-8 stellt pro Pixel, wie der Name schon sagt, acht Bit plus vier Bit für die Transparenz (also 16 Stufen) zur Verfügung. Dadurch werden einerseits so viele Farben wie beim GIF-Format unterstützt, auf der anderen Seite aber eine bessere Transparenz ermöglicht. Durch die fehlenden Animationen ist PNG-8 nur für einfache Logos, Icons sowie Grafiken mit kleinem Farbspektrum eine sinnvolle Alternative.
Die Bildformate PNG-24 und PNG-32
Beide Versionen des PNG-Formats verwenden den gleichen Farbraum mit je acht Bit pro Kanal, wodurch pro Pixel über 16 Millionen Farben dargestellt werden können. Während PNG-24 eine einfache Index-Transparenz unterstützt, verwendet PNG-32 die weiteren acht Bit für einen Alpha-Kanal und somit 256 Transparenz-Stufen. Der im Web häufig verbreitete Glaube, PNG-24 hätte einen Alpha-Kanal ist falsch. Bekannheit erlangte er durch Adobe, da in Photoshop und Illustrator nur von PNG-8 oder PNG-24 die Rede ist. Nutzt ihr aber mit PNG-24 einen Alpha-Kanal muss auch Adobe eine PNG-32 produzieren, um die weiteren acht Bit unterbringen zu können. Informiert werdet ihr darüber jedoch nicht.
Insgesamt wird das PNG-Format mit RGB-Farbraum häufig mit einer relativ großen Dateigröße in Verbindung gebracht. Das hängt unter anderem mit der Unterstützung von Transparenz und der verlustfreien Komprimierung zusammen. Sinnvoll ist das Format deswegen bei Grafiken mit vielen verschiedenen Farben und einer benötigten Transparenz. Bei wirklich notwendiger mehrstufiger Transparenz muss sogar auf das größere 32-Bit-Format zugegriffen werden.
Dafür ist das PNG-Format ideal:
- Die 8-Bit-Variante kann für Logos, Icons und einfache Grafiken verwendet werden
- Die beiden größeren Varianten sind für Grafiken mit benötigten Transparenzen und großem Farbraum
- Neben JPG im Web weit verbreitet und dafür auch sinnvoll
- Wenn erneutes Bearbeiten oder Exportieren benötigt wird (ermöglicht durch verlustfreie Komprimierung)
SVG: Vektorgrafiken
Die bisherigen Formate JPG, PNG und GIF waren alles Bitmapgrafiken (auch Pixelgrafiken genannt). SVG ist das einzige Vektorgrafiken-Format in unserem Vergleich. Es wurde extra für das Web entworfen und erlangt dort auch eine immer größere Verbreitung.
Was ist eigentlich der Unterschied zwischen Vektor- und Bitmapgrafiken?
Pixelgrafiken speichern für jeden Bildpunkt die Farbwerte. Die Kombination aller Punkte und Farben ergibt dann letztlich ein ganzes Bild. Die vielen Farbwerte sorgen aber auch für einen großen Speicherbedarf (bei FullHD-Auflösung müssen über zwei Millionen Farbwerte gespeichert werden, was beim RGB-Farbraum ohne Komprimierung über sechs Megabyte sind). Außerdem können Pixelgrafiken nicht verlustfrei hochskaliert werden. Logisch, da bei einer höheren Auflösung Farbwerte fehlen.
Dem gegenüber stehen Vektorgrafiken, bei denen Vektorinformationen gespeichert werden. Also beispielsweise starte in Punkt X und male einen Kreis bis Punkt Y mit dem Radius 100. Die entstandene Linie soll zehn Pixel dick sein und die Farbe Blau haben. Derartige Grafiken sind zwar in der Farb- und Schattendarstellung sowie im Detaillierungsgrad stark eingeschränkt, müssen aber nicht so viele Informationen speichern und können außerdem beliebig hochskaliert werden.
Das Format erlaubt das bedingungslose Skalieren der Grafiken. Somit ist es sehr gut für Logos, Icons und einfache Grafiken im Web geeignet: perfekt für das Responsive Design. Aber nicht nur im Web sind Vektorgrafiken sinnvoll. Unternehmen sollten ihre Logos immer als Vektorgrafik vorliegen haben. So kann die Größe des Logos ohne Verluste beliebig angepasst werden. Egal ob für einen Flyer oder ein großes Werbeplakat.
Der Nachteil ist leider, dass nicht jede Person, jedes Content-Management-System oder Social-Media-Plattform mit Vektorgrafiken so einfach umgehen kann. Wer seine Grafik aber als SVG erstellt hat, kann es ohne Probleme in eine handelsübliche Pixelgrafik der passenden Größe konvertieren. Inzwischen nimmt die Verbreitung von SVG stark zu, sodass jeder moderne Webbrowser das Format bereits unterstützt. Mögliche Grafiksoftware für das Format sind Inkscape, Illustrator oder auch Sketch.
Dafür ist das SVG-Format ideal:
- Logos, Icons und einfache Grafiken im Responsive Design oder die in verschiedenen Größen, Farben und Formen benötigt werden
- Grafiken, die im Nachhinein bearbeitet werden müssen
Webp – Das neue Format fürs Web
Der Name des vergleichsweise noch sehr jungen Bildformat ist Programm. Webp soll das Bildformat fürs Web werden, zumindest wenn es nach dem Entwickler Google geht. Es spricht aber auch einiges dafür. Webp gibt es in zwei Varianten: mit verlustfreier und verlustbehafteter Kompression. Gegenüber PNG spart das verlustfreie Format laut Googles Angaben rund 26 Prozent seiner Dateigröße bei gleichbleibender Qualität ein. Im Vergleich zu JPG sind es bei der verlustbehafteten Variante sogar bis zu 34 Prozent. Beide Versionen unterstützen auch einen Alpha-Kanal, welcher ebenfalls deutlich weniger Speicherplatz benötigt als beispielsweise PNG. Außerdem unterstützt Webp Animationen und steht damit in direkter Konkurrenz zu GIF. Vorteile: bessere Transparenz und RGB-Farbpalette. Konvertiert man GIF-Bilder in das Webp-Format spart man sogar bis zu 64 Prozent Speicherplatz ein.
Der große Nachteil des Formats ist die Unterstützung. Während jeder handelsübliche Browser und eine breite Sparte an Software mit GIF, JPG und PNG umgehen kann, sieht das Ganze bei Webp eher mau aus. Unterstützen kann Webp bislang hauptsächlich Google Chrome für den Desktop und Android, Opera und der native Android-Webbrowser. Solange die Unterstützung weiterer großer Webbrowser wie Firefox, Safari und Edge fehlt, dürfte das „Bildformat fürs Web“ jedoch ein Format für Chrome, Android und Opera bleiben. Wer jedoch eine Website betreibt, sollte stets darauf achten, dass jeder aktuelle Browser die eigene Seite richtig darstellen kann.
Dafür könnt ihr Webp verwenden:
- Fotografien und weitere Bilder mit großem Farbraum
- Grafiken, auch mit Transparenz
- Alternative zu Animationen mit GIF
- Kurz: fürs Web
- Aktuell durch fehlenden Support von Firefox, Safari und Edge jedoch noch nicht empfehlenswert
Mehr Details zu Webp findet ihr in unserem Überblick.
Warum hast du nach der Studie der Infografik Bilder mit 2 und 6 Farben als JPEG eingebunden? Hier wäre PNG die bessere Lösung gewesen.
schöne Gegenüberstellung mit Vor und Nachteilen.. Da wir immer mal wieder Schulpraktikanten bei uns haben, ist das eine super Grafik um auf einen Blick alle unterschiede zu erklären. Besten Dank
Gruß Tim