Webprojekte: Gif oder Jpeg?

Intro
Übersicht

Konzept
Seitenaufbau
Seitengestaltung
Navigation

Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns

Glossar
Ressourcen
Druckversion

Gifs für Grafiken, Jpegs für Fotos.

Beim einsetzten von Bilder und Grafiken auf Webseiten geht es vor allem um das vermeiden von langen Wartezeiten die durch das Laden der Bilder übers Netz verursacht werden. Der Schlüssel hierzu sind Kompressionsverfahren. Hierzu wird die Datei um alle nicht absolut notwendigen Daten erleichtert. Eine Postkarte in Druckqualität, vierfarbig, kann ca. 20 mB Speicherplatz benötigen. Das sind Datenraten die im WWW nach wie vor indiskutabel sind. Also sind Kompressionsformate unverzichtbar. Natürlich hat das Qualitätsverluste zur Folge, die sich aber je nach verwendetem Kompressionsformat=Dateiart in Grenzen halten können.

Die gängisten Formate sind Gif (gesprochen "Jif") und Jpeg. Andere Formate sind Fif und PNG (gesprochen "ping"), für die Macs entweder garnicht oder nur bedingt geeignet sind.

Prinzipiell sind Gifs für Graphiken und Jpegs für Fotos gedacht. (Bei Jpeg spricht ja schon der Name dafür). Auch große Grafiken mit wenigen Farben sind hervorragend für Gifs geeignet und man muß nicht auf die "bröslige" Jpeg Qualität zurückgreifen, die viel bessere Kompressionsraten hat.

Was ist ein Gif?

RGB in "indizierte Farben" umwandeln. Das Bild wird auf 265 Farben reduziert.

Ein Gif entsteht aus einer RGB Photoshop Datei die in indizierte Farben umgewandelt wird. Meistens ist es richtig das Angebot der Einstellungen von Photoshop anzunehmen.
Entweder "Eigene Palette" wählen und "Netscape Palette" laden, dazu "Diffusion Dither" wählen, oder "Flexibel" und "Diffusion Dither". Tests sind zu empfehlen.

Was ist ein Jpeg?

Ein Bild, d.h. am besten ein Foto wird, trotz Datenverlust bei der Komprimierung in 24 bit Farben dargetellt. .

Im Gegensatz zum Gif ist das Jpeg ein kostenloses Format, eine Norm die zu Bildkompression entwickelt wurde. Die Filmvariante dazu wäre ein MPEG. Die Verläufe in einem Jpeg sind feiner und unter "Millionen Farben" sieht eine Fotografie je nach Kompressionsrate, viel besser aus als ein Gif. Das Verfahren zur Kompression des Bildes ist effektiver als beim Gif, d.h. es wird schneller übertragen, erfahrungsgemäß verlieren Grafiken jedoch an Qualität.

2 Beispiele:

Die oberen Ringe sind "geglättet", die unteren eine Pixeldünne Linie.
Der linke Farbbalken stellt die reinen Farben des 6x6x6 Netscape Farbwürfels dar.
Der rechte Farbbalken beschreibt die gleichen Farben als stufenlos Übergänge.
Merke:
NIEMALS ein Gif zu Jpeg konvertieren, oder umgekehrt!
Die Kompressions- verfahren sind nicht kompatibel. Das Millionen Farben Jpeg nutzt nur die 265 Farben des Gifs. Jpegs können, außer in maximaler Qualität, in Photoshop nicht mehr adäquat weiterverwendet werden. Die Qualität sinkt rapide.

Jpeg

Gif

Jpeg in mittlerer Qualität
Der rechte Farbbalken zeigt die Stufenlosen Übergänge der Farben. Wolken und Schatten haben feine Übergänge.
ca. 22 k

Gif in 8bit, flexibler Farbpalette, diffusions Dither
(Einstellungen waren Angebot des Programms Photoshop 3.0)
Obere Ringe (geglättet) sind deutlich von den Unteren (ungeglättet) zu unterscheiden. Der rechte Farbbalken ist gestückelt. Wolken und feinere Abstufungen von hell nach dunkel gehen verloren.
ca. 33 k

Beide Bilder sehen unter Millionen, Tausenden und 256 Farben völlig unterschiedlich aus.
Das Gif Format hat nur 256 Farben zur Verfügung, sortiert sie nach deren Häufigkeit in der Farbtabelle und "simuliert" die echten Farben. Natürlich gehen dabei feine Abstufungen verloren.

Das Jpeg hat Millionen Farben zur Verfügung, sieht unter 256 Farben aber sehr schlecht aus, da der Bildschirm ein "dither" erstellt und reine Weisstöne "bröselig" wirken lässt. Dafür sieht es unter Millionen Farben plastischer aus.

Sind einige Bilder nicht als Jpeg bzw. Gif zu sichern gibt es in Photoshop noch offene Kanäle oder Ebenen, die erst gelöscht werden müssen.

Jpegs, Progressive Jpegs, Gifs, Interlaced Gifs

Ein Vergleich der gebräuchlichen Formate (138 k)

Jpegs und Gifs gibt es in verschieden Qualitätsstufen, die sich in kb bzw. Ladezeit ausdrücken lassen: Je besser die Qualität desto mehr kb und ergo längere Ladezeit.
Mit Progressiven Jpegs und "geinterlaceden" Gifs hat man sich den Trick einfallen lassen ein Bild anstelle das es zeilenweise von oben nach unten, zuerst ein grobes, volles Bild an den Kopf des Dokument zu setzen das dann in vier Zwischenschritten schärfer wird. Das erweckt den, subjektiven, Eindruck das Bild lade schneller.

Gifs im Besonderen: 87a und 89a

Gif 87a: interlaced, oder auch nicht.
Gif 89a: interlaced, transparent und animierbar; oder auch nicht.
Ein animiertes Gif 89a, interlaced, loop (wiederholt sich ständig) (160 k)
und ein weiters animiertes Gif 89 a, transparent, interlaced, ohne loop. (31 k)

MIt Hilfe des kleinen - noch beta - Programms GifBuilder 0.3.2 stellt man animierte Gifs her. Mehr unter Ressourcen.

Gif 87a	Gif 89a
Das gemeine Gif: nicht interlaced ca. 2 k!	Gif 89a, transparent ca. 2 k!
Gif 87a	Gif 87a
ca. 2,3 k!	ca. 3,8 k!
Dasselbe Bild um 90 Grad gedreht benötigt mehr Speicherplatz Gifs werden Horizontal gesichert. Bei horizontalen Linien brauchen sie dementsprechend wenig Speicherplatz und Ladezeit.

Intro
Übersicht

Konzept
Seitenaufbau
Seitengestaltung
Navigation

Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns

Glossar
Ressourcen
Druckversion

Kommentare oder Vorschläge ?
http://www.digital.hdk-berlin.de/~mhohl/styleguide/gifojpeg.html
© Hochschule der Künste Berlin
Michael Hohl
26-Juni-96