GIF und JPEG sind die üblichen und verbreitetsten Formate für Grafiken auf Webseiten. Für PNG gilt im wesentlichen das gleiche wie für das GIF-Format.

Die grundsätzlichen Eigenschaften der beiden Formate sind in den jeweiligen Artikeln abgelegt. Der folgende Artikel befaßt sich mit der praktischen Anwendung dieser beiden Formate und zeigt, welches der Formate in welchen Fällen das geeignetere ist.

Gif und Jpg bei Fotos

Die hohe Anzahl von verschiedenen Farben, die in den meisten Fotos vorzufinden ist, trägt entscheidend bei der Auswahl der Dateiformats bei:
das GIF-Format besitzt eine Farbtabelle, welche höchsten 256 Farben aufnehmen kann. Das bedeutet, daß Sie erstens die Datenmenge nur durch die Reduzierung der Farben verringern können und zweitens 256 Farben häufig zu wenig für ein ansprechendes Foto ist.

JPEG wiederum speichert mehr Farbinformationen ab, wodurch eine hohe Farbanzahl gewährleistet werden kann. Die eingebaute flexible Komprimierung ermöglicht zusätzlich eine Reduzierung der Dateigröße, ohne große Einschnitte in der Qualität zu machen.

Als Beispiel hier ein Foto mit einem blauen Himmel:

JPEG ( 200 x 270 Pixel ) 11.9 KB	GIF (200 x 270 Pixel ) 14,8 KB

Wie Sie hier sehen, ergeben sich gerade durch die reduzierte Anzahl der Farben bei GIF bei den Farbübergängen (Himmel und Teile der Flagge) häßliche Streifen. Die 256 verschiedenen Farben reichen einfach nicht aus, um einen gleichmäßigen Farbübergang darzustellen. Beim JPEG-Format tritt dieses Problem nicht auf.

Die Dateigröße ist im Gegensatz zum gif (14,8 KB) mit 11.9 Kb auch noch deutlich kleiner. Das JPEG-Bild ist allerdings mit 50% komprimiert.

Die JPEG-Komprimierung

Das JPEG-Foto liefert bei 50% Komprimierung befriedigende Qualität. Die Farbübergänge am Himmel und an der Flagge erscheinen in allen Farben:

JPEG (unkomprimiert) 71,0 KB	JPEG (50% komprimiert) 11,9 KB

Wenn man das Bild mit starker Vergrößerung betrachtet, kann man jedoch erkennen, wie die JPEG-Komprimierung arbeitet:

In quadratischen Bereichen werden die Farbinformationen durch Mittelwertsberechnungen zusammengefaßt.

Bei dieser Vergrößerung kann man aber auch deutlich einen der Nachteile von JPEG erkennen: Kanten und harte gerade Übergänge franzen mit zunehmender Komprimierung aus.

Je besser Sie die Qualität einstellen, desto kleiner werden diese quadratischen Bereiche und desto weniger wird der Nachteil sichtbar.

Fotos als GIF (Ausnahme)

In manchen Fällen macht die Verwendung vom GIF-Format jedoch auch bei Fotos Sinn. Ein Beispiel:

JPEG (unkomprimiert) 66,0 KB	GIF (32 Farben) 12,0 KB

Hier besteht das Bild sowieso nur aus wenigen Farbtönen (schwarz, grün und gelb) und es gibt auch keine auffälligen Farbübergänge.

Das Bild wurde hier auf 32 Farben reduziert und trotzdem erscheint kein Qualitätsverlust und sogar die dünnen Oberleitungen der Züge und die Zeiger der Uhr werden gestochen scharf dargestellt. Bei einem JPEG würden diese dünnen Linien ausfranzen.

GIF oder JPEG bei Logos

Das Logo von ciT besteht aus nur zwei unterschiedlichen Farben. Die meisten Logos sind in dieser Art aufgebaut, d.h. wenig flächige Farben und Schrift in Form von Buchstaben oder Worten. Solche Grafiken sind der optimale Einsatz für GIFs. Erreicht wird dadurch eine sehr kleine Dateigröße, wodurch das Logo schnell geladen wird und als erstes erscheint, und man kann den Transparenz-Effekt von dem GIF-Format sehr gut ausnutzen (Transparenz bedeutet, daß der weiße Hintergrund von diesem Logo durchsichtig wäre und die Sc hrift auch auf einem schwarzen Hintergrund gut zu sehen wäre).

GIF: 8 Farben 5,77 KB

Das GIF habe ich hier ohne Transparenz mit 8 verschiedenen Farben abgespeichert, um einen sanften Übergang zu dem weißen Hintergrund zu schaffen.

GIF: 4 Farben 4,14 KB

Zum Vergleich habe ich hier nur 4 verschiedene Farben verwendet: Die Farbanzahl reicht hier einfach nicht aus und die Ränder sehen pixelig aus.

JPEG: Qualität 10 % 6,14 KB

Hier habe ich das gleiche Logo einmal als JPEG abgespeichert. Die starke Komprimierung verursacht Störungen in den Farbflächen und in Umgebung der Schriftzüge.

GIF bei Texten

Wenn es um die Darstellung von Texten als Bild geht, ist das GIF-Format eindeutig die bessere Wahl. Das liegt daran, das GIF die scharfen Kanten der Buchstaben klarer darstellen kann, als das JPEG-Format.

Bei normalen einfarbigen Schriften ( keine Effekte wie Schatten, Relief, usw) genügen meistens ca. 16 verschiedene Farben, damit die Schrift auf Ihren Webseiten klar, deutlich und nicht pixelig erscheint.

Hier ist ein Beispiel:

GIF 16 Farben 2,51 KB :

Mit 16 Farben erscheint die Schrift gut leserlich und ohne pixelige Ränder.

GIF 3 Farben 1,54 KB :

Mit 3 Farben dagegen kann man gerade an runden Buchstaben Stufen erkennen.

JPEG Qualität 20% 3.07KB :

JPEG ist hier total unbrauchbar: Die Schrift ist unscharf und an den Rändern der Buchstaben treten Störungen auf. Außerdem ist die Datei weitaus größer als das des GIF-Formats.