SELFHTML aktuell Artikel Grafik/Multimedia
Roland Bilger:
GIF oder JPEG
Roland Bilger
Allgemeines zu GIF und JPEG
Fotos
Die JPEG-Komprimierung
Fotos als GIF (Ausnahme)
GIF oder JPEG bei Logos
GIF bei Texten
| E-Mail: |  roland@webvolume.de |
|---|---|
| Homepage-URL: |  http://www.webvolume.de/ |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
GIF und JPEG sind - trotz neuerer Formate wie PNG oder auch SVG - nach wie vor die verbreitetsten und üblichen Formate für Grafiken auf Webseiten.
Die grundsätzlichen Unterschiede zwischen den beiden Formate werden in SELFHTML im Abschnitt 
WWW-gerechte Grafiken beschrieben. 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.
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.
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.
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.
Das Logo von Webvolume 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 Schrift auch auf einem schwarzen
Hintergrund gut zu sehen wäre).
GIF: 16 Farben 2,18 KB
Das GIF habe ich hier ohne Transparenz mit 16 verschiedenen Farben abgespeichert, um einen sanften Übergang zu dem weißen Hintergrund zu schaffen. Beachten Sie unbedingt die Dateigröße!
GIF: 4 Farben 1,35 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 20 % 3,53 KB
Hier habe ich das gleiche Logo einmal als JPEG abgespeichert. Die starke Komprimierung
verursacht Störungen an den Rändern der Farbflächen.
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.
