GIF, JPG oder PNG?

Die richtige Auswahl des Grafik-Formats entscheidet maßgeblich über Qualität und Ladezeit. Wer hier auf das falsche Pferd setzt, kann dies später nicht mehr durch einen anderen Sattel korrigieren.

GIF
Das GIF-Format, für den Online-Dienst Compuserve entwickelt, ist im Laufe der Zeit zum Standard geworden. Es besteht aus maximal 256 Farben und eignet sich in erster Linie für Bilder, die nur geringe Farbtiefen aufweisen. Besonders gut lässt sich das GIF für Navigationselemente einsetzten. Eine GIF-Datei kann durch Farbreduzierung noch verkleinert werden.

GIF-Grafik 5kb

JPG-Grafik 15kb

Wegen der eingeschränkten Farbenzahl eignet sich das Format nicht für Fotos und Farbverläufe. In einem direktem Vergleich sieht man den Unterschied zwischen einem Foto im JPG und GIF-Format.

Im GIF-Format sind deutlich Farbverluste erkennbar. Farbverläufe sehen besonders unsauber aus. Dateigröße:11kb

Das gleiche Foto im JPG-Format kann sich sehen lassen, von der Qualität und der Dateigröße, die nur 6kb beträgt.

Das GIF-Format macht einige Besonderheiten möglich, die für das Web-Design besonders attraktiv sind: das Interlacing, die Farbtransparenz und die Animation.

Interlacing
Der Browser baut das Bild nach dem Laden gewöhnlich Zeile für Zeile auf. Je größer die Datei, desto länger dauert es, bis der Betrachter erkennen kann, was er gerade lädt. Das Interlacing hilft diesem Problem ab. Es baut zunächst ein Gesamtbild mit unscharfen Konturen auf, das zunehmend schärfer kontrastiert. Schon nach dem Runterladen der halben Datenmenge, ist das Bild sichtbar. Auf diese Weise kann der Surfer schon früh erahnen, was auf ihn zukommt und den Ladevorgang abbrechen, wenn er es möchte.

Transparenz
Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am Besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen „durchsichtig“ erscheinen und der Hintergrund schimmert durch. Wie das in der Praxis funktioniert, finden Sie im Artikel über die „Bildkomprimierung mit Fireworks3“.

Das animierte GIF
Animationen sind nichts Neues. Sicher haben Sie im Internet schon mal sich bewegende Pfeile gesehen. Dazu wird die GIF-Grafiken aus mehreren Einzel-Grafiken zusammensetzt, hintereinander gelegt und nach einer vorgegebenen Zeit gegeneinander ausgewechselt.

Das JPG-Format
Das JPG, auch JPEG (Joint Photographic Experts Group), kann bis zu 16,7 Millionen Farben darstellen. Anders als beim GIF, wird beim JPG durch Datenreduktion die Dateigröße verringert. Es wird nur bei Bildern verwendet, die mehr als 256 Farben enthalten. Farbreduzierung wie beim GIF ist hier aber nicht möglich.

PNG
Beim PNG (Portable Network Graphics) handelt es sich um ein schon altes, aber neu ins Spiel gebrachtes Grafikformat. Es vereint die Vorzüge vom GIF und JPG. PNG- Grafiken können mit bis zu 48-Bit-Farben abgespeichert und trotzdem verlustfrei komprimiert werden, und das mit einer Qualität von 16 Millionen Farben + 256 Transparenzstufen (GIF gibt nur bis zu 8 Bit wieder). Moderne Browser haben keine Probleme PNG-Grafiken in vollem Umfange darzustellen.

Das GIF Format konnte es bei der Komprimierung ohne nennenswerte Qualitätsverluste auf 2,8kb bringen.

Das JPG schneidet am schlechtesten ab. Mit einer Dateigröße von 5,3 kb und einem sichtbaren Qualitätsverlust verliert das JPG das Rennen.

Die PNG-Grafik ist mit dem Ergebnis des GIFs vergleichbar (Dateigröße 2,4). Fast die gleiche Dateigröße und ein zufriedenstellendes Ergebnis. Obige Beispiele zeigen, dass PNG dem GIF nahe kommt. Würde man das Beispiel mit einem Foto wiederholen, würde das GIF verlieren und das PNG mit dem JPG gleichziehen.