Richtige Bildformate im Web - GIF, JPG oder PNG?

Durch die Wahl des richtigen Bildformates, der richtigen Bildgröße, der richtigen Kompression und des richtigen Farbraumes kann man die Performance seiner Webseite signifikant steigern. Doch welches Bildformat verwendet man für welchen Anwendungsfall, damit man maximale Performance ohne optische Verluste erreicht?

Üblicherweise sind im Web drei Bildformate weit verbreitet: GIF, JPG und PNG. Andere Formate, wie z.B. BMP oder TIFF werden zwar vom Browser angezeigt, davon ist aber abzuraten, da die Dateien viel zu groß sind.

GIF-Format (Graphics Interchange Format)

Dieses Format basiert auf verlustbehafteter Kompression. Hierbei wird die Farbanzahl auf maximal 256 Farben und minimal 2 Farben reduziert. Die Reduzierung erfolgt, indem jedem Originalpixel der nächstähnliche Farbwert zugewiesen wird. Des Weiteren kann nur einem Farbwert die Eigenschaft „transparent“ zugewiesen werden. Einfache Animationen sind möglich, wobei hochwertige Animationen heutzutage meist mit Flash programmiert werden.

Anwendungsfälle - GIF:

• Graphiken mit einem geringen Farbspektrum
• Web-Elemente, wie z.B. kleine Pfeile, Bubbles, einfache Logos
• einfache Animationen

JPG-Format (Joint Photographic Experts Group)

Dieses Format basiert ebenfalls auf verlustbehafteter Kompression. Es wird auf feine Bilddetails verzichtet, zugunsten detailärmerer Flächen. Man kann die Kompressionsstufe selbst festlegen. Bei niedriger Kompression werden die Unterschiede für das menschliche Auge kaum sichtbar sein. Bei einer höheren Kompression werden die Bilder meist unscharf und pixelig. Die Farbanzahl beträgt bis zu 16,7 Millionen Farben.

Anwendungsfälle - JPG:

• Fotos
• Graphiken ohne Transparenzen

PNG-Format (Portable Network Graphics)

Dieses Format basiert auf verlustfreier Kompression. Dadurch sind die Dateien im Vergleich zu JPG größer. Es werden zwei PNG-Formate unterschieden: PNG-8 und PNG-24. Das PNG-8-Format besitzt eine Farbtiefe von 8 Bit. Somit sind, wie beim GIF, zwischen 2 und maximal 256 Farben möglich, von denen eine Farbe als Transparenz verwendet werden kann. PNG-24 umfasst eine Farbtiefe von 24 Bit, d.h. 16,7 Millionen Farben, die um einen Alpha-Kanal mit 8 Bit ergänzt werden kann. Somit können qualitativ hochwertige Transparenzen dargestellt werden.

Anwendungsfälle - PNG:

• hochwertige Graphiken
• Transparenzen
• Achtung: im Internet Explorer werden Transparenzen erst ab Version 7 unterstützt