Home  >  Tutorials  >  Basics Tutorials  >
GIF oder JPEG?
E-mail this tutorial to a friend Email to a Friend

GIF oder JPEG?
Von: Doro Sensen

 
Es herrscht oft Verwirrung darüber, ob man ein Bild besser als GIF oder als JPEG speichert, um es auf eine Webseite zu stellen. Es gibt da aber einige Punkte, die die Entscheidung leicht machen.
 

Transparenz und/oder Animation

Wenn ihr ein transparentes Bild möchtet, dann muß es im GIF-Format sein. Das JPEG-Format kann einfach nicht mit transparenten Bereichen gespeichert werden.

Eine Alternative wäre das PNG-Format, das ebenfalls transparente Bereiche speichern kann; es wird jedoch noch nicht von allen Webbrowsern voll unterstützt.

Wenn ihr ein animiertes Bild möchtet (das dann auch transparent sein kann, wie das Bild links), dann muß es im GIF-Format sein. Es gibt einfach kein anderes Graphikformat, das Animationen abspeichern kann.

 

Farbige Clipart

Wenn ihr eine Clipart habt oder ein Bild mit sehr wenigen Farben, dann ist GIF besser (kleiner) als JPEG. Links seht ihr ein paar Bilder zum Vergleich; ich habe die Blume als Vektor-Clipart gemacht und die Bilder dann gespeichert als:

Bild oben links:  JPEG mit Antialiasing – 4 KB
Bild oben rechts:  JPEG ohne Antialiasing – 5 KB
Bild unten links:  GIF mit Antialiasing – 3 KB
Bild unten rechts:  GIF ohne Antialiasing – 1 KB

(Beide JPEGs wurden mit einer Kompressionsrate von 25% gespeichert. Das GIF-Bild mit Antialiasing hatte 371 Farben, ich habe es mit 17 Farben gespeichert.)

Ihr seht, daß beide GIF-Dateien kleiner sind als sogar die kleinste JPEG-Datei. Meine Wahl wäre eines der GIF-Bilder, das mit Antialiasing für ein normales GIF-Bild und das ohne Antialiasing für ein transparentes GIF (das hängt ein bißchen vom Hintergrund ab, da man auf hellerem Hintergrund die ausgefransten Ränder [Jaggies] nicht sehen kann).

 


Komplexe Farben

Wenn ihr jedoch ein Bild habt mit Farbverläufen, Schatten oder Texturen, dann ist das JPEG-Format besser (und kleiner) als das GIF-Format. Vergleicht einmal die Bilder links, es ist dieselbe Clipart von oben, jedoch mit verschiedenen Farbverläufen gefüllt:

Bild links:  JPEG-Format (Kompressionsrate 25%) – 3 KB
Bild rechts:  GIF-Format – 5 KB

Beim JPEG-Bild gehen die Farben schön ineinander über, beim GIF-Bild sind sie ein wenig "gestreift" (vergleicht mal den blauen Hintergrund und das linke Blatt!). Das JPEG ist außerdem kleiner als das GIF, das mit 256 Farben gespeichert werden mußte, um den Farbverlauf so gut wie möglich hinzukriegen.

 

Photos

Die Beispiele oben waren ziemlich einfache Clipart und die Unterschiede in der Dateigröße nicht so sehr groß. Aber das Gesagte gilt natürlich um so mehr für Photos:

Bild links:  JPEG – 4KB
Bild rechts:  GIF – 12 KB

(Das JPEG wurde wieder mit einer Kompressionsrate von 25% gespeichert, das GIF mit 256 Farben, Octree optimiert.)

Ihr seht, daß – abgesehen von der wesentlich kleineren Dateigröße – die Qualität des JPEG-Bildes viel besser ist. Wenn ihr also ein Photo habt, dann muß es das JPEG-Format sein!

 




Es soll aber transparent sein!

Wenn ihr ein Bild mit einem schönen Farbverlauf und einem weichen Schatten habt und es als transparentes GIF speichern wollt, dann ist das Ergebnis ziemlich enttäuschend.

Bild oben:  JPEG – 4 KB
Bild unten:  GIF – 7 KB

Auf diesem dunklen Hintergrund muß man noch nicht einmal genau hinsehen, um zu merken, daß der Schatten sehr ausgefranst ist. Außerdem ist die GIF-Datei sehr viel größer (nimmt man das relativ einfache Bild) als die JPEG-Datei.

 
Eine Möglichkeit, das zu umgehen, ist es, den Schatten "härter" zu machen – was aber wahrscheinlich auch nicht so aussieht, wie ihr es euch vorgestellt habt, und die gefransten Ränder sind auch nicht völlig verschwunden.
 
Eine andere Möglichkeit ist es, dem Bild vor dem Speichern dieselbe Hintergrundfarbe wie die der Webseite zu geben (oder die dominierende Farbe eures Hintergrundbildes). Natürlich kann man es in diesem Fall nur für diesen einen Hintergrund verwenden. Das sieht jetzt ganz gut aus, aber man hat immer noch die höhere Dateigröße von 7-8 KB.
 



 
Was ich in diesem Fall am liebsten mache, ist ein "transparentes" JPEG. Leider funktioniert das nur auf Hintergründen mit einer Farbe oder auf ziemlich "ruhigen" Hintergründen (Bild unten).

Man füllt einfach die Hintergrund-Ebene mit der Farbe (genau so wie bei dem transparenten GIF oben) oder dem Hintergrundbild der Webseite und speichert es dann als JPEG-Datei. Damit hat man beide Vorteile: keine ausgefransten Ränder und eine kleinere Dateigröße (in diesem Fall 4 KB). Diese Möglichkeit nutze ich am liebsten, um den Transparenz-Effekt zu bekommen. :-))

 


 
Das funktioniert allerdings nicht auf einem Hintergrund, der nicht so ruhig ist, wie hier links; hier könnt ihr ganz genau sehen, wo das Bild und der Hintergrund zusammentreffen. Andererseits kann man Text auf solchen Hintergründen kaum lesen, normalerweise sind die Hintergründe also sowieso ruhig genug, daß man diese letzte Möglichkeit nutzen kann!

Ihr werdet diese Methode für euren eigenen Hintergrund ausprobieren oder den Hintergrund an die Bilder anpassen müssen, um den Effekt zu bekommen, den ihr euch vorstellt.

 
(Übersetzung aus dem Englischen von Doro Sensen)