zur Startseite vom TP

1

Im Internet sind nur wenige Grafikformate sinnvoll nutzbar.
Kleine Dateigröße und damit schnelle Ladezeit der Website sind für Internet-Grafiken sehr wichtig. Und alle auf dem Markt befindlichen Browser müssen mit dem verwendeten Grafikformat umgehen können.

Für Pixelgrafiken erfüllen drei Datei-Formate diese Voraussetzungen: gif, jpg und png:

2GIF:

Das älteste Format im Web ist gif (Grafic Interchange Format), welches schon 1987 im Auftrag des Onlinedienstes Compuserve entwickelt wurde. Das gif-Format eignet sich hervorragend zum Komprimieren von Grafiken mit wenigen Farben und zusammenhängenden Farbflächen (z.B. Logos, Buttons u.ä.)

Weitere Vorteile des gif-Formats: Es kann eine beliebige Farbe der Ausgangsgrafik als transparent definiert werden. Das Ergebnis ist dann z.B. ein freigestelltes Bild, welches problemlos auf jedem Hintergrund, auch mit Farbverläufen, platziert werden kann. Diese Variante des gif-Formats heißt korrekt "gif89a".

Außerdem können gif-Bilder im "Interlaced"-Modus gespeichert werden. Ergebnis beim Betrachter mit seinem Browser ist: Das Bild baut sich stufenweise von grob bis fein auf. Subjektiv hat der Betrachter das Gefühl des schnelleren Ladens, da er die Grafik schon frühzeitig erkennen kann, objektiv ist die Datei aber sogar etwas größer, aber nur wenige Bytes.

Auch die beliebten animierten Grafiken im Web sind gif-Dateien (animated gif). Diese können z.B. mit Macromedia Fireworks, Adobe Image Ready (im Lieferumfang von Photoshop seit Vers. 5.5) und vielen speziellen Free- und Shareware "Gif-Animations-Programmen" erstellt werden.

Der große Nachteil des gif-Formats liegt in seiner Farbbeschränkung: Es können maximal 256 Farben je Grafik gespeichert werden. Damit ist es für alle Bilder mit Farbverläufen, z.B. Fotos, untauglich.

3PNG:

(gesprochen "ping") steht für "Portable Network Graphics" und ist die Alternative und Nachfolger des gif. Dieses Format kann 16,7 Mio Farben darstellen, komprimiert sehr gut und verlustfrei und ist im Gegensatz zu gif für die Softwarehersteller ohne Lizenzgebühren implementierbar.

Auch mit dem png-Format lässt sich wie beim gif eine Transparenz einstellen. Im Gegensatz zum gif-Format sogar "auslaufend" von Teil-Transparenz auf komplette Transparenz. Leider kann der allseits beliebte Internet-Explorer einer großen amerikanischen Software-Firma png-Bilder mit Transparenz bis einschließlich der Version IE 6 immer noch nicht korrekt darstellen. Deswegen muss man leider von der Verwendung von png-Grafiken mit Transparenz im Web nach wie vor abraten. Der IE 7 versteht dann endlich auch transparente png, Netscape-Browser kommen schon seit Vers. 4.0 (von 1996!) mit diesem Format klar, alle anderen Browser (Opera, Firefox, Safari ...) auch.

4JPEG oder JPG:

Das jpg-Format (Joint Photographic Experts Group) ist der "Allrounder": Dieses Format kommt zum Einsatz, wenn es sich um Bilder mit vielen Farben handelt, also grundsätzlich für Fotos und für alle Grafiken mit Farbverläufen. Da jpg immer mit 16,7 Mio. Farben speichert, können mit diesem Format solche Bilder am besten dargestellt werden.

Ähnlich wie der interlaced-Modus beim gif-Format funktionieren die "progressiven JPEG-Grafiken": es wird erst eine undeutliche Fassung des Bildes im Browser angezeigt, die Details werden nach und nach sichtbar.

5Kleine Beispiele zu den Formaten:

Ein Logo mit wenigen Farben:

• Abbildung 1: jpg-Format mit 40% Qualität ist bei schlechter Qualität 4,4 kb groß 
• Abbildung 2: gif-Format mit 6 Farben, beste Qualität und nur 1,6 kb groß 

Umgekehrt das Ergebnis mit folgendem Bild mit vielen Farbverläufen:

• Abbildung 3:
  jpg-Format mit 60% Qualität ist bei guter Qualität 10,5 kb groß 
• Abbildung 4:
  gif-Format trotz 256 Farben, schlechte Qualität und 18,7 kb groß 

Zum Vergleich das gleiche Bild als 6-Farben-gif: Abb.5

6Fazit

Du siehst:
Das optimale Web-Grafik-Format gibt es nicht sondern ist vom Ausgangsbild abhängig!