Grafikformate für das Web

Aufgrund der langsamen Datenübertragungsgeschwindigkeit sollten die Grafiken auf den eigenen Web-Seiten möglichst klein sein, also möglichst wenig Kilobytes »wiegen«. Denn kein Besucher wartet gerne.

Mit welchem Grafikformat erreicht man die geringsten Dateigrößen? Grafikformate wie TIFF, BMP oder PSD kann man im Web vergessen, da sie viel zu große Dateigrößen zur Folge haben. Ebenfalls nicht verwendet werden sollten »Insel-Formate«, die nicht von Browsern unterstützt werden und mit denen auch der Rechner des Besuchers nichts anfangen kann.

Das Problem der geringen Übertragungsgeschwindigkeiten besteht bekanntlich schon seit den Anfangstagen des Webs. Deshalb konnten sich Programmierer schon frühzeitig mit der Frage beschäftigen, wie man Bilddaten verkleinert. Inzwischen kann der Web-Designer auf drei verschiedene Grafikformate zurückgreifen, welche jeweils unterschiedliche Techniken zur Bilddaten-Komprimierung verwenden. Es sind dies

• das JPEG-Format (Joint Photographic Experts Group, ».jpg«),
• das GIF-Format (Graphic Interchange Format, ».gif«),
• das PNG-Format (Portable Networks Graphics, ».png«).

Auf das letztgenannte PNG-Format möchte ich an dieser Stelle nicht eingehen, da es zwar ein W3C-Standard ist und von neueren Browsern unterstützt wird, aber in der Praxis noch keine Bedeutung hat. Denn leider ist die Darstellung in verschiedenen Browsern noch zu verschieden.

Bevor ich die einzelnen Grafikformate vorstelle noch etwas Grundlegendes vorweg: Diese Grafikformate haben zwar den Vorteil, dass sie Bilddaten enorm verkleinern können. Auf der anderen Seite bedeutet dies aber auch immer einen Qualitätsverlust bei den Grafiken. Man kann sagen: Je kleiner die Dateigröße, desto größer der Qualitätsverlust. Gespannt darf man sein, wann und ob überhaupt das JPEG-2000-Format sein, welches aufgrund des Wavelet-Verfahrens Bilder nahezu ohne Qualitätsverlust komprimiert.


• Das JPEG-Format

Das JPEG-Format kommt in der Regel bei Fotos oder Grafiken mit vielen Details und Farben zum Einsatz. Das Komprimierungsverfahren beruht auf der Idee, benachbarte Bildpunkte in sogenannten »Clustern« zusammenzufassen. Aus einzelnen Pixeln werden sozusagen Pixelgruppen geformt. Damit lässt sich die Dateigröße enorm verkleinern.

Die JPEG-Kompression ist immer verlustbehaftet. Das Bild verliert also bei jedem Abspeichern Bilddetails: Es treten unschöne Bildklumpen auf und Kanten werden unscharf. Vorsicht: Hat man das Bild einmal im JPG-Format gespeichert, dann lassen sich geclusterte Details nicht wieder herstellen. Deshalb sollte man

• das Original nie als JPEG-File abspeichern, sondern z.B. als .tif und
• immer vom unkomprimierten Original aus komprimieren, nie von einer JPEG-Datei, da sich dann die Verluste addieren.

Die Stärke der Kompression kann bei guten Programmen auf einer 100-stufigen Skala festgelegt werden. In einem Vorschaufenster gleicht man normalerweise den Ausgangszustand und den komprimierten Zustand solange miteinander ab, bis man mit der Dateigröße und der Bildqualität gleichermaßen zufrieden ist.

Nachfolgende Bildbeispiele verdeutlichen den Qualitätsverlustes bei Verkleinerung der Dateigröße. Die Originaldatei ist 81 Kilobyte groß.


In diesem Beispiel stellt die 50-Prozent-Lösung den besten Kompromiss zwischen Bildqualität und Dateigröße dar.


• Das GIF-Format

Das GIF-Format eignet sich weniger für Fotos und Bilder mit vielen Farben. Seine Stärken kommen zum Einsatz, wenn es darum geht, eher flächige Grafiken mit wenigen Farben ins Netz zu stellen, z.B. Logos, Illustrationen, Schriften.

Die Komprimierungsverfahren fasst gleichfarbige Pixel innerhalb der einzelnen Zeilen zu Gruppen zusammen. Deshalb bleiben z.B. bei Fotos oder Farbverläufen die Dateien sehr groß, weil es hier aufgrund vieler unterschiedlicher Bildpunkte nicht viel zusammenfassen kann.

Das GIF-Format hat den großen Nachteil, dass es nicht mehr als 256 Farben darstellen kann. Hat eine Grafik deshalb mehr Farben, dann werden nicht unterstützte Farben durch »Dithering« simuliert. Das heisst in etwa: Ein dunkleres Gelb wird erzeugt, indem man in das normale Gelb schwarze Pixel hineinstreut. Schaltet man das Dithering aus, dann wird statt dem dunklen Gelb ein anderer verfügbarer Farbton verwendet. Durch Dithering kann sich übrigens die Dateigröße stark erhöhen.

Dass nur 256 Farben zur Verfügung stehen, muss aber kein Nachteil sein, denn man kann diese Farben selbst bestimmen. Dies macht man über »Paletten«. Normalerweise hat man dabei die Wahl zwischen einer voreingestellten, einer automatischen oder individuell zusammengestellten Palette.

• Zu den voreingestellten Paletten gehört zum einen die "browserunabhängige Farbpalette". Diese wird verwendet, wenn man eine identische Farbanzeige auf verschiedenen Browsern (Internet Explorer, Communicator,...) wünscht. Weitere voreingestellte Paletten enthalten z.B. jeweils die Systemfarben von Mac und Windows-PCs.
• Die automatisch durch das Optimierungsprogramm zusammengestellte Palette besteht nur aus Farbtönen, die auch im Originalbild zu finden sind. Diese Palette wird am Häufigsten verwendet und bietet den besten Kompromiss aus Qualität und Zeiteinsatz.
• Bei der Individuellen Farbpalette bestimmt der Bildbearbeiter selbst die Farben. Dies ist jedoch mühsam und der Zeitaufwand lohnt sich selten.

Nachfolgend wieder ein paar Bildbeispiele, in der oberen Reihe mit browserunabhängiger Farbpalette, in der unteren mit automatisch optimierter Palette.


Der Web-Grafiker muss beim GIF-Format nicht unbedingt 256 Farben verwenden. Er kann die Anzahl der Farben ebenfalls bestimmen und damit die Dateigröße nochmals verringern, denn es gilt: Je weniger Farben das GIF benutzt, desto geringer die Dateigrößeund desto geringer damit auch die Ladezeit.


Beim GIF-Format kann aber nicht nur die Farben und deren Anzahl festgelegt, sondern auch bestimmt werden, welche Farben transparent sein und damit nicht angezeigt werden sollen. Dadurch ist es möglich, ein und dieselbe Grafik bei unterschiedlichen Hintergrundfarben oder -motiven zu verwenden, wie in den nachfolgenden Abbildungen zu sehen ist.



Sehr nützlich ist diese Funktion z.B. bei Logos und bei Motiven, die auf jedem Hintergrund ohne das »Außenrum« erscheinen sollen. Jedoch erlangt man nur bei Motiven mit relativ scharfen Kanten ein gutes Ergebnis. Sobald z.B. ein Schatten zu weich ist, besteht die Gefahr, dass »Blitzer« entstehen, also der ehemalige Hintergrund an den Kanten hervorsticht.

Schließlich ermöglicht das GIF-Format auch Animation. Typische Beispiele für animierte GIFs sind z.B. animierte Banner oder drehende Logos, die man allerorten findet. Will man kleinen Grafiken mit kurzen Animationen versehen, ist GIF eine gute Wahl. Sobald man aber längere und anspruchsvoller Animationen erstellen möchte, sollte man auf Flash zurückgreifen. Der für die Anzeige notwendig Flash-Player ist heute schon auf vielen Systemen vorhanden.