Allgemeine Übersicht der Grafikformate
Wenn man mit Grafik arbeitet, egal ob in Adobe Flash oder auf Webseiten sollte man immer das passende Format nehmen.
Anbei eine kleine Auflistung der 3 gängigsten Grafikformate und ein direkter Vergleich zwischen Ihnen.
Grafikformate
Übersicht der Grafikformate
| Dateiendung | Mime Type | Name | |
|---|---|---|---|
.png | image/png | Portable Network Graphics (PNG) | |
.jpg | image/jpeg | Joint Photographic Experts Group (JPEG / JPEG JFIF) | |
.gif | image/gif | Graphics Interchange Format (GIF) | |
PNG
PNG ist ein Grafikformate für verlustfreie und gut komprimierten Bilder. PNG ist im Vergleich zu GIF patent-frei und bietet einige mehr Features.
Es werden Indiziertebilder (bis 256 Farben), Graustufenbilder (256 Graustufen) und Farbbilder (bis 64 Bit) unterstützt, zusätzlich bietet PNG noch die Möglichkeit einer Transparenten Ebene an.
JPEG
JPEG ist ein verlustbehaftetes Bildformat, hier werden Bilder mit hoher Farbanzahl sehr gut komprimiert, jedoch werden ähnliche Pixel und Farbtöne zusammen gefasst gespeichert.
Es werden hier nur Farbbilder ab 24 Bit unterstützt, somit ist dieses Format nur für Fotos oder für sehr große Grafiken gedacht.
GIF
GIF ist wie PNG ein Grafikformat für verlustfreie und gut komprimierte Bilder, jedoch nur bis 256 Farben. GIF unterstützt nur eine einfache transparent und sollte nur verwendet werden wenn PNG nicht verwendet werden darf oder kann.
Vergleich der Grafikformate
Dieser Vergleich soll zeigen wie viel Speicherplatz die Unterschiedlichen Formate bei welche Farbanzahl benötigen, auch wird hier getestet, wie viele Daten letztendlich an den Browser übertragen werden.
64 Farben
PNG (Dateigröße: 583 Bytes / Übertragungsgröße: 1.006 Bytes)
JPG (Dateigröße: 3.735 Bytes / Übertragungsgröße: 4.160 Bytes)
GIF (Dateigröße: 4.348 Bytes / Übertragungsgröße: 4.773 Bytes)
128 Farben
PNG (Dateigröße: 905 Bytes / Übertragungsgröße: 1.328 Bytes)
JPG (Dateigröße: 3.320 Bytes / Übertragungsgröße: 3.745 Bytes)
GIF (Dateigröße: 5.770 Bytes / Übertragungsgröße: 6.195 Bytes)
256 Farben
PNG (Dateigröße: 1.419 Bytes / Übertragungsgröße: 1.843 Bytes)
JPG (Dateigröße: 2.767 Bytes / Übertragungsgröße: 3.192 Bytes)
GIF (Dateigröße: 5.991 Bytes / Übertragungsgröße: 6.416 Bytes)
16 Milionen Farben
PNG (Dateigröße: 528 Bytes / Übertragungsgröße: 951 Bytes)
JPG (Dateigröße: 2.767 Bytes / Übertragungsgröße: 3.192 Bytes)
Foto Test und Vergleich
Beim 16 Milion Farbentest schneidet nur aufgrund der einfachen Form die PNG Grafik besser ab, bei komplizierten Formen wie Fotos sollte jedenfalls das JPG Format verwendet werden.
Foto Test in 16 Millionen Farben
PNG (Dateigröße: 85.330 Bytes)
JPG (Dateigröße: 12.875 Bytes)
Foto Test in 256 Farben
PNG (Dateigröße: 23.713 Bytes)
GIF (Dateigröße: 25.663 Bytes)
128 Farben - Ohne Farbverlauf
Hier auch mal ein Test ohne Farbverlauf damit die Unterschiede sichtbar sind wenn nicht das ganze Bild verwendet wird.
PNG (Dateigröße: 3.078 Bytes / Übertragungsgröße: 3.502 Bytes)
JPG (Dateigröße: 4.782 Bytes / Übertragungsgröße: 5.208 Bytes)
GIF (Dateigröße: 3.578 Bytes / Übertragungsgröße: 4.002 Bytes)
GZIP Komprimierung / Übertragung
Viele Webserver und Browser unterstützen eine GZIP komprimierte Übertragung, jedoch hat es keinen Sinn diese für Bilder zu aktivieren.
Die Einstellung ob Bilder GZIP komprimiert übertragen werden, wird beim Webserver festgelegt.
| Dateityp | Dateigröße normale Übertragung | Dateigröße mit GZIP Übertragung | |
|---|---|---|---|
PNG | 583 Bytes | 862 Bytes | |
JPEG | 3.735 Bytes | 5.531 Bytes | |
GIF | 4.348 Bytes | 5.956 Bytes | |
Weitere Komprimierung bzw. Optimierung von PNG und JPG Dateien
Aufgrund des technischen Aufbaus von PNG oder JPG Dateien ist es auch möglich diese weitere zu optimieren bzw. zu komprimieren ohne die eigentlichen Bildinformationen zu ändern.
Grundsätzlich arbeiten diese Optimierungstools alle nach dem selben Prinzip, die vorhandenen Daten werden entpackt, dann werden alle verfügbaren Algorythmen und Optionen ausprobiert und verglichen.
Der Algorythmus und die Optionen die am wenigsten Speicher benötigen werden dann verwendet um die optimierte Version zu erstellen.
Durch Hilfe dieser Technik erreicht man eine zusätzliche Komprimierung von 20% - 40%.
optiPNG
Einer der bekanntesten Optimierer für PNG Dateien ist optiPNG welche für verschiedene Betriebssystem existiert.
Online Image Optimierung Smush.itT
Smush.it ist ein Online Image Optimierungstool, welches von Yahoo! zu Verfügung gestellt wird.
Hiermit lassen sich Bilder schnell und einfach Online Optimieren ohne die entsprechenden Tools installieren zu müssen.
Ihr erreicht das Online Tool unter der folgenden URL:
http://www.smushit.com/ysmush.it/
Fazit
Wie hier zu sehen ist, gibt es keinen Grund, warum man nicht PNG anstatt GIF verwenden soll, PNG wird von allen modernen Browser unterstützt und bei der richtigen Verwendung erhält man sehr kleine Bilddateien.
Für Fotos solle immer das JPG Format verwendet werden, es sei den handelt sich um Fotos mit mit wenig Bildinformationen und Farben oder aber man will eine verlustfreie Kompression verwenden.
