Grafikformate fürs Web

Fotos und Grafiken, die auf Webseiten eingebunden werden sollen, müssen möglichst klein sein und dabei trotzdem noch eine annehmbare Qualität vorweisen. Verschiedene Grafikformate stehen hier zur Auswahl und jedes hat seine Vor- und Nachteile. Aber welches eignet sich für was am besten?

Die Platzhirsche

Das Grafics Interchange Format (GIF) und das nach der Joint Photographic Experts Group benannte JPEG-Format sind alte Bekannte im Internet und wahrscheinlich bei 95% aller im Web verfügbaren Bilder das Grafikformat der Wahl. Während ersteres vor allem bei einfachen Zeichnungen punkten kann und mit Transparenz und Animationsfähigkeiten besticht, spielt das JPEG-Verfahren seine Stärken vor allem im Bereich Fotos aus.

Beide Verfahren haben ihre Stärken und Schwächen. So ist GIF in der Lage Bilder verlustfrei zu speichern – allerdings nur, wenn sie weniger als 256 Farben haben. Außerdem nimmt der Kompressionsfaktor mit steigender Komplexität eines Bildes überproportional ab. Fotos machen so keinen Spaß. JPEG verkraftet hingegen knapp mehr als 16 mio Farben (24 bit RGB) und lässt sich in der Kompression fast stufenlos variieren. Leider verläuft die Kompression nicht verlustfrei, d.h. bei hoher Kompression leidet die Qualität eines Bildes sehr deutlich.

Alternativen

Neben diesen Grafikformaten gibt es auch Alternativen. Eine der bekannteren ist Portable Network Graphics-Format, besser bekannt als PNG, welches ursprünglich als Alternative zum bis Ende 2006 mit Patenten belasteten GIF entwickelt wurde. Wie GIF komprimiert es verlustfrei. Wahlweise mit 8-bit, was 256 Farben entspricht, aber auch bis zu 48-bit (was eine Bild-Datei aber ziemlich groß werden lässt). PNG ist ISO-Standard und eine W3C-Empfehlung und wird von allen Browsern unterstützt. Zudem komprimiert es in der Regel besser als GIF und besitzt zudem einen richtigen Alpha-Kanal, was es ermöglicht, jedem Pixel eine fast beliebig starke Transparenz zuzuordnen. GIF kann hingegen nur eine einzige Farbe komplett transparent setzen. Bei weichen Kanten führt das schnell zu Sägezähnen. Abgesehen von Animationen, für die ursprünglich ein eigenes Grafikformat namens MNG entwickelt werden sollte, beherrscht PNG daher fast alle Disziplinen von GIF und diese meist besser. Das es sich nicht durchsetzen konnte liegt wohl zum einen am Erlöschen der Patentbeschränkungen für GIF und an der schlechten Unterstützung des IE bis Version 6, der mit dem Alpha-Kanal nie so richtig klar kam. Prinzipiell spricht aber heutzutage nichts mehr gegen den Einsatz von PNG.

Noch bekannter und erfolgreicher ist wohl das Flashformat von Macromedia (heute Adobe) SWF. Flash ist das momentan leistungsstärkste Multimedia-Format, welches neben nativer Unterstützung für Vektorgrafiken auch PNG, JPEG, Video und Ton mit einbinden kann. Besonders die Werbeindustrie hat sich auf dieses Format gestürzt, da es vielfältige Möglichkeiten bietet. Flash ist aber nicht ganz unumstritten und sollte vorsichtig eingesetzt werden. Es ist ohne weiteres möglich, komplette Webseiten in Flash zu erstellen, die auch von knapp 95% aller Browser dargestellt werden können. Flash ist jedoch kein offener Standard, sondern ein von Adobe gehegtes und gepfegtes Format, welches möglichst nur mit deren - ziemlich teuren – bearbeitet werden soll. Davon abgesehen ist es teils recht ressourcenhungrig und kann von Suchmaschinen nicht erfasst werden.

Wer Flash nicht mag, kann theoretisch das auf XML-basierende Scalable Vector Grafics-Format SVG einsetzen. Wie der Name schon sag, handelt es sich hierbei um ein Vector-Grafikformat, d.h., es basiert auf Linien statt auf Punkten. Theoretisch lässt sich mit SVG in Kombination mit der Multimediasprache SMIL und Javascript alles bewerkstelligen, was auch Flash kann. In der Realität scheitert dieses Vorhaben jedoch schnell an der mangelnden Verfügbarkeit von passenden Software-Tools. Zwar gibt es einige sehr gute, teils sogar freie Tools, wie z.B. Inkscape, diese sind jedoch meist reine Zeichenprogramme und weit entfernt von einer integrierten Entwicklungsumgebung, wie sie für Flash verfügbar ist. Zwar lässt sich SVG auch vorzüglich mit einem guten Texteditor bearbeiten und anpassen, da es pures XML ist, aber das ist sehr aufwändig. Davon abgesehen unterstützt der IE SVG nur mit einem Plugin vom Flash-Hersteller Adobe (welcher die Entwicklung komischerweise inzwischen eingestellt hat, nachdem sie Macromedia aufgekauft haben) und auch die Implementierung im Mozilla ist noch weit entfernt von den Möglichkeiten.

Neben diesen aufgelisteten Möglichkeiten gibt es auch noch den ein oder anderen Exoten. Technisch sehr viel versprechend aber leider kaum verbreitet ist der JPEG-Nachfolger JPEG2000. Es basiert auf der so genannten diskreten Wavelet-Transformation und ist momentan eines der leistungsfähigsten Kompressionsverfahren überhaupt. Leider gibt es kaum freie Programme (z.B. XnView), mit denen sich dieses Grafikformat schreiben lässt und die meisten Browser unterstützen es nur mit PlugIns wie Quicktime.

Fazit

Um Fotos zu speichern bleibt eigentlich nur das JPEG-Format. GIF scheidet sowohl durch die geringe unterstützte Anzahl Farben als auch den verwendeten Komprimierungsalgorithmus aus. Zwar komprimiert GIF im Prinzip verlustfrei, aber gerade diese Eigenschaft sorgt für unverhältnismäßige Dateigrößen. PNG unterstützt zwar einen Farbraum bis zu 48 Bit (für das Web reichen auch 24 Bit), kämpft aber auch mit dem Verlustfrei-Problem.

Bei gezeichneten Bildern wie z.B. Cliparts, Excel-Charts oder Text-Grafiken sieht es wiederum anders aus. Die in der Regel sehr scharf gezeichneten Linien zeigen bei JPEG schnell Fransen und die typischen Artefakte. Die Grafikformate GIF und PNG können hier hingegen ihre Stärken voll ausspielen. Während GIF immer noch den höheren Verbreitungsgrad aufweisen kann, wird auch PNG von allen halbwegs aktuellen Browsern unterstützt. Da es insgesamt etwas leistungsfähiger ist und vor allem einen richtigen Alpha-Kanal besitzt, ist es definitiv einen Blick wert. Wer allerdings Animationen einsetzen will muss doch wieder zu GIF oder besser noch gleich Flash greifen. SVG könnte sich noch zu einer ernsthaften Alternative entwickeln, vor allem das einzige, frei verfügbare, reine Vektor-Grafikformat ist, woduch Zeichnungen noch wesentlich besser speichern und auch nachträglich manipulieren lassen. Allerdings bedarfs es für einen Einsatz in freier Wildbahn noch einer viel stärkeren Unterstützung, vor allem seitens Microsoft. Mal sehen ...