Bildformate fürs Web

18. September 2018 | Von | Kategorie: Dateiformate, Pixel und Vektoren, Webdesign

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
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
verlustbehaftet
ca. 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)

 

Quelle: https://t3n.de/news/bildformate-ueberblick-jpeg-gif-png-586476/

Keine Kommentare möglich.