Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

GIF, JPG, SVG, PNG oder doch lieber Webp? Wann du auf welches Bildformat setzen solltest

Alle wichtigen Bildformate im Vergleich. (Grafik: Shutterstock/Lucky clover)

Welches Bildformat ist wofür am besten geeignet? Gerade im Web kommt es auf viele Faktoren an: Dateigröße, Farbspektrum, Transparenz und Skalierbarkeit. Wir machen den Vergleich.

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:

Die Unterschiede von JPG, PNG, GIF, SVG und Webp

BildformatKompressionFarbspektrumTransparenzBesonderheiten
JPG/JPEGverlustbehaftetca. 16,8 Millionen FarbenNein
GIFverlustfreiMaximal 256 FarbenEinfache Transparenz (Index)Einfache Animationen
PNG-8verlustfreiMaximal 256 Farben4-Bit-Transparenz mit 16 Stufen pro PixelKeine Animationen
PNG-24verlustfreica. 16,8 Millionen FarbenEinfache Transparenz (Index)
PNG-32verlustfreica. 16,8 Millionen FarbenAlpha-Kanal
SVGverlustfreica. 16,8 Millionen FarbenAlpha-KanalVektorgrafiken lassen sich verlustfrei hochskalieren. Auch Animationen sind möglich.
Webpverlustfreica. 16,8 Millionen Farben (YUV420)Alpha-KanalAnimationen möglich
verlustbehaftetca. 16,8 Millionen Farben (RGBA)

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)

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
E.

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.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.