So wählen Sie für Ihre Website das richtige Bildformat aus.

Grundsätzlich haben sich im Web drei Bildformate durchgesetzt. Jedes einzelne Format birgt dabei Chancen und Risiken bei der Anwendung. Ziel der Website-Performance-Optimierung ist dabei immer, für den Anwendungsfall das geeignete Bildformat mit der geringsten Bildgröße zu finden.

GIF (Graphics Interchange Format)

Eines der ältesten Bild-Formate für das Internet ist das GIF-Format. Die meisten kennen es sicherlich von den lustigen Animationen die man damit erstellen kann. Dabei muss man allerding darauf achten, dass die Dateien sehr schnell recht groß werden, denn in einer Animation werden einfach mehrere Bilder hintereinander gelegt. Jedes einzelne Bild erhöht dadurch die Dateigröße.

Neben Animationen kann man aber auch Teile des Bildes transparent machen. Damit kann man z.B. freigestellte Objekte auf einem Hintergrund platzieren.

Leider bietet dieses Bildformat nur einen begrenzten Farbraum an. GIF-Bilder können maximal 256 Farben enthalten. Damit ist es zwar für Fotos ungeeignet, aber hat ein großes Potential bei kleinen Bildern mit wenigen Farben (z.B. Icons).

JPG/JPEG (Joint Photographic Experts Group)

Das JPEG-Bildformat ist durch seine hervorragende Komprimierung bekannt geworden. Durch die Komprimierung konnten auch groß dimensionierte Bilder mit relativ kleinen Dateigrößen ausgetauscht werden.

Beim Erstellen der Bilder ist zudem der Grad der Komprimierung einstellbar. Wählt man eine zu große Komprimierung entstehen zwar sehr kleine Dateien, aber es bilden sich auch sichtbare Artefakte innerhalb der Bilder.

Das JPEG-Format ist sehr weit verbreitet und nahezu jede moderne Digitalkamera unterstützt dieses Format. Dementsprechend ist es besonders gut für Fotos und Bilder geeignet, in denen sehr viele Farben dargestellt werden müssen.

PNG (Portable Network Graphics)

Das PNG-Format tritt als Nachfolger von GIF an und bietet eine verlustfreie Kompression und Transparenz ohne die Beschränkung des Farbraums. Dadurch wird zwar eine sehr gute Darstellung erreicht, aber es entstehen häufig auch sehr große Bilddateien.

Einen weiteren Nachteil hat PNG außerdem noch: Die Transparenz wird vom Internet Explorer nicht vollständig unterstützt. Dadurch kann es zu Darstellungsproblemen ihrer Website kommen.

Zusammenfassung

• GIF: Geeignet für kleine Bilder mit max. 256 Farben und Transparenz
• JPG: Besonders gut für Fotos geeignet
• PNG: Verlustfreie Kompression und Alpha-Transparenz

Ressourcen

• Das richtige Bildformat für Internet & Diashow
• 10 Tips for Optimizing Your Website’s Speed
• Minimize payload size: Optimize Images