Die Surfer-Gemeinde setzt, besonders in den USA, Webbilder häufig mit dem GIF-Format gleich. "I've got a few GIFs for you", heisst es - aber dann kommen JPEG-komprimierte Fotos oder gar BMP-Bilder direkt vom Windows-PC. Mit ein Grund für die begriffliche Popularität dürfte das hohe Alter des GIF-Formats sein. Es wurde bereits 1987 von Compuserve eingeführt und wird, ausser von rein textbasierten Programmen wie Lynx, ausnahmslos von allen Web-Browsern unterstützt.
Sein Alter merkt man dem GIF-Format deutlich an. Erstens unterstützt es nur 256 Farben - für fotografisches Bildmaterial und Grafik mit feinen Schattierungen und Übergängen ungeeignet. Zweitens berücksichtigt GIF bei der Bildkompression ausschliesslich horizontale Muster: Auf Basis des LZW-Algorithmus, der nicht speziell für die Bildbearbeitung entwickelt wurde, sucht der GIF-Kompressor den eingehenden Datenstrom nach wiederholten linearen Bit-Sequenzen ab. Beim ersten Auftreten wird eine bestimmte Sequenz in einem Data Dictionary abgelegt und mit einem Code gekennzeichnet. Kommt die Sequenz später wieder vor, muss in den komprimierten Daten nur noch der Code erscheinen - man spart Platz. So wird nach und nach zeilenweise das ganze Bild erfasst. Es liegt auf der Hand, dass mit diesem Verfahren nur horizontal sich wiederholende Muster erkannt und komprimiert werden: Ein Bild mit Querstreifen ist im GIF-Format viel kleiner als sein längsgestreifter Gegenpart.
Ein weiteres Obstakel für GIF ist die Patentlage. Zwar ist Compuserve von der Absicht abgekommen, jeden Einsatz des Formats zahlungspflichtig zu machen. Dafür verknurrt Unisys, die Inhaberin des LZW-Patents, die Hersteller von Tools zum Erstellen von GIFs zu Lizenzgebühren. Es fällt auf, dass das neue Format PNG ziemlich genau dann ins Leben gerufen wurde, als Unisys mit der Gebührenforderung auf den Plan trat.
Trotz alledem erfreut sich GIF ungebrochener Beliebtheit, wohl nicht zuletzt wegen Features wie Transparenz (Pixel von bestimmter Farbe sind für den Hintergrund durchlässig), Interlacing (alternierende Anzeige der Zeilen in zwei Durchgängen, damit das Bild in Grobdarstellung rascher sichtbar wird) und Animation (mehrere Bilder können in einer Datei gespeichert und in bestimmten Intervallen abgespielt werden). Es existieren zwei verschiedene GIF-Formate:
• GIF87a: Support für Interlacing, Speichern mehrerer Bilder in einer einzigen GIF-Datei
• GIF89a: zusätzlich Transparenz, Textkommentare und Animation
Die meisten Tools erstellen heute automatisch GIF89a-Bilder. Anwender älterer Photoshop-Versionen mögen sich jedoch noch an das "GIF89a-Plug-in" erinnern, das zum Erstellen eines GIFs mit Transparenz nötig war.
Das Portable Network Graphic Format, kurz PNG genannt und "ping" ausgesprochen, wurde von Anfang an als stark verbesserter Ersatz für GIF konzipiert. In der Grundvariante dient es der komprimierten Speicherung eines einzelnen Bildes in einer Datei. Das neue Format räumt mit der 8-Bit-Einschränkung von GIF auf. Neben ebenfalls möglichen 8-Bit-Bildern bietet PNG alle Farbtiefen bis über TrueColor hinaus: Möglich sind Graustufenbilder bis 16 Bit und Farbbilder bis 48 Bit pro Pixel.
PNG unterstützt alle Features von GIF mit Ausnahme der Speicherung mehrerer Bilder; damit bietet es auch keine Animationsmöglichkeiten. Es existiert aber unter dem Namen MNG eine Multi-Image-Erweiterung von PNG mit starken Animationsfunktionen.
Die Basis von PNG ist Deflate, eine verbesserte Version von LZW, die zum Beispiel auch im bekannten Utility pkzip zum Einsatz kommt. Auch Deflate erkennt nur repetitive horizontale Muster; PNG setzt jedoch vor der Kompression insgesamt vier Pre-Filter-Funktionen ein, von denen zwei sich mit vertikalen Bildmustern beschäftigen. Das Resultat: PNG komprimiert wesentlich besser als GIF.
Verbessert wurde auch das Interlacing. PNG verwendet ein Interlacing-Verfahren mit sieben Durchgängen und zeigt bereits ein erkennbares Bild an, wenn erst 20 bis 30 Prozent der Gesamtdaten übertragen sind; bei GIF-Bildern müssen dazu bereits 50 Prozent der Daten vorhanden sein. Ein Bild in Vier-undsechzigstel-Qualität ist bei PNG praktisch sofort sichtbar.
Neu dazugekommen und für Grafikformate einzigartig: In einem PNG-File lässt sich die Gamma-Einstellung des Systems speichern, auf dem das Bild erstellt wurde. Mit dem Gamma-Wert wird das Anzeigeverhalten im Hinblick auf die Lichtintensität geregelt. Verschiedene Monitore und Systemplattformen haben unterschiedliche Einstellungen, die sich vor allem in den mittleren Helligkeitsbereichen eines Bildes zeigen. Besonders zwischen PC und Mac gibt es deutliche Differenzen: Während der Durchschnitts-PC eine Gamma-Einstellung von 2,2 hat, fahren Mac-Systeme mit 1,8. Die Folge: Bilder, die auf einem Mac aufbereitet wurden und dort ausgezeichnet aussehen, erscheinen bei PC-basierten Surfern zu dunkel. Bisher musste der Webdesigner seine Bilder auf einen mittleren Gammawert einpegeln, also auf dem Mac eher aufhellen oder auf dem PC leicht abdunkeln. Wenn der Gammawert des Ursprungssystems aber mit dem Bild gesichert wird, kann der Browser die Anpassung automatisch vornehmen.
PNG bietet wie GIF die Möglichkeit, bestimmte Farben als "transparent" zu markieren. Pixel, die in einer dieser Farben gehalten sind, lassen im Browser den Hintergrund durchscheinen. Diese einfache Methode der Transparenz hat jedoch gewichtige Nachteile. Weiche Kanten, zum Beispiel beim Text-Antialiasing, sind schwierig zu realisieren. Das Bild muss stets auf eine bestimmte Hintergrundfarbe ausgerichtet werden - wechselt die Hintergrundfarbe, erscheinen unschöne "Blitzer" rund um die transparenten Bereiche. Es ist praktisch unmöglich, perfekte Transparenz auf einem gemusterten Hintergrund hinzukriegen.
Neben der Farbmaskierungsmethode bietet PNG deshalb zusätzlich eine bessere Möglichkeit für Transparenz an: PNG-Bilder können einen Alphakanal enthalten, der bis zu 65'535 Abstufungen zulässt. Damit kann man wunderschöne Schatten- und Glüheffekte erzeugen, Antialiasing ist ein Kinderspiel, und Freisteller mit feinsten Details werden anstandslos angezeigt - zumindest in der Theorie.
Die Implementierung der PNG-Features ist nämlich mangelhaft, vor allem in den Browsern. Der aktuelle Stand: Internet Explorer kann ab Version 4.0 PNGs ohne Plug-in anzeigen, bietet aber auch in der allerneuesten Ausgabe 6.0 keine vollständige Unterstützung der Alpha-Transparenz, mit der es auch bei Opera hapert. Bestimmte Bilder zeigt IE unter Windows sogar überhaupt nicht an. Dafür ist die Gammakorrektur unterstützt. Unter Mac OS dagegen bietet Internet Explorer 5.5 nahezu perfekte PNG-Unterstützung.
Netscape Navigator ab 4.04 bis 5.x zeigt PNGs an, aber erst die Mozilla-basierte Version 6 bietet vollständigen Support für alle Features inklusive MNG. Der aktuelle Navigator 6.1 ist denn auch derzeit der beste Browser zum Betrachten von PNG-Bildern, dicht gefolgt vom KDE-Browser Konqueror unter Linux.
Besser sieht es bei den Grafiktools aus. Das Paradepferd unter den PNG-Editoren ist Fireworks von Macromedia; dieses Programm nutzt PNG als Basisformat und speichert alle Dateien als PNG ab, inklusive aller Zusatzinformationen über Objekte und andere Bildparameter. Für die Publikation auf dem Web sollte man deshalb nicht das mit dem Save-Befehl gespeicherte Originaldokument verwenden, sondern eine spezielle, mit dem Export-Befehl erzeugte Webversion. Ebenfalls hervorragend: The GIMP, das neben Linux auch als Windows-Version verfügbare Open-Source-Bildbearbeitungsprogramm, bietet ab Version 1.1.7 des PNG-Plug-ins vollen Support für Alpha und Gamma sowie für Textkommentare. Photoshop schliesslich beherrscht PNG ab Version 4, bietet aber nicht gerade die beste Kompression. Eine detaillierte Aufstellung aller PNG-unterstützenden Tools und Browser findet sich auf der PNG-Homepage.
Alles in allem sollte PNG eigentlich längst das überholte GIF abgelöst haben - wenn da nur nicht die Browser-Probleme wären. Die meisten Webdesigner setzen für grafische Elemente deshalb nach wie vor GIF ein, so auch Matthias Saner von Popeye: "Wir verwenden PNG nicht. Der Support ist immer noch ungenügend, vor allem was die Gammakorrektur und den Alphakanal betrifft."
Fotos kommen prinzipiell im JPEG-Format auf die Webseite, das bei anständiger Kompression ordentliche Resultate liefert. Unser Beispiel zeigt, dass ein 630-Kilobyte-Bild auch bei über dreissigfacher Kompression (JPEG-Einstellung im Bildeditor 50 Prozent) noch ansprechend aussieht. Ein vergleichbares GIF wäre übrigens über 90 Kilobyte gross.
Geht man wesentlich über ein Kompressionsverhältnis von 40 hinaus, nimmt die Qualität des komprimierten Bildes drastisch ab. Scharfe Ränder verschmieren, in flächigen Bereichen erscheinen Artefakte, das Ganze wirkt "verpixelt". Die Variante mit 7 Kilobyte (15-Prozent-Einstellung) ist zwar noch gut erkennbar, kann aber nicht mehr als ästhetisch ansprechend gelten.
Verbesserte Bildqualität bei hoher Kompressionsrate war denn auch eines der Hauptziele, die die Joint Photographic Experts Group (JPEG) bei der Entwicklung des JPEG2000-Standards verfolgte. JPEG2000 basiert auf Wavelet-Kompressionsalgorithmen, die ähnlich auch von verschiedenen proprietären Produkten verwendet werden und neben der JPEG-üblichen verlustbehafteten Kompression (lossy) auch verlustfreie Kompression (lossless) ermöglichen. Im Gegensatz zur diskreten Kosinustransformation (DCT) von JPEG, bei der das Bild in einzelne zu komprimierende Pixelbereiche eingeteilt wird, codiert die Wavelet-Methode einen fortlaufenden Datenstrom. Wavelet-Artefakte bei hoher Kompression erscheinen als weichgezeichnete Kanten; "Verpixelungen" wie bei JPEG kommen nicht vor. Dies propagieren zumindest die Hersteller von JPEG2000-Tools. Ein kurzer Test mit dem Power Compressor von Image Power (www.imagepower.com) zeigt allerdings, dass ein mit JPEG2000 stark komprimiertes Bild nicht immer wesentlich besser aussieht als ein gleich grosses JPEG.
Im JPEG2000-Datenstrom wird das Bild hintereinander mehrfach in verschiedener Auflösung abgelegt. Als erstes kommt ein grobes Abbild, danach folgen immer mehr Details. Diese Multi-Resolution-Architektur ermöglicht ohne zusätzlich benötigten Speicherplatz auch eine progressive Bilddarstellung in der Art des GIF-Interlacing.
JPEG2000 Part 1 wurde im Dezember 2000 anlässlich eines ISO-Meetings zum offiziellen Standard erklärt, ist jedoch erst in Form spezieller Kompressionsprogramme, Plug-ins für Tools und Browser sowie als Codec für Softwareentwickler erhältlich. Kein aktueller Web-Browser unterstützt JPEG2000 von sich aus. "Es wird noch Jahre dauern, bis JPEG2000 wirklich einsetzbar ist", bemerkt Popeye-Designer Saner. Bis dann dürften JPEG2000 und andere Wavelet-basierte Kompressionsverfahren vor allem in Spezialanwendungen zum Zug kommen, wo es um besonders grosse Bilder geht.
Für JPEG und JPEG2000 spielen die folgenden Anmerkungen keine Rolle. Diese fotografisch orientierten Standards decken alle 16,7 Millionen Farbschattierungen des TrueColor-Farbraums lückenlos ab. Wer jedoch grafisches Material mit flächigen Farben und harten Übergängen wie Logos, Schriftzüge, Strichzeichnungen und andere Diagramme aufs Web bringen will, wird das ohnehin auf 8 Bit beschränkte GIF-Format oder, aus Platzgründen ebenfalls auf eine 8-Bit-Palette reduziert, PNG wählen.
Eine der meistbemühten unumstösslichen Regeln für den Webgrafiker: Bei Farbflächen in nichtfotografischen Bildern wie Logos, Hintergründen und Diagrammen soll man sich auf die sogenannte "Web-sichere Netscape-Palette" beschränken, da sonst je nach System unerwünschte Rastereffekte auftreten können.
Noch vor wenigen Jahren beherrschten die Grafiksysteme der meisten PCs nur gerade die gleichzeitige Darstellung von 256 verschiedenen Farben. Aus der theoretisch unendlichen Farbvielfalt muss das System deshalb für jede Bildschirmanzeige eine kleine Untermenge auswählen - dazwischenliegende Töne werden durch Muster leicht unterschiedlich gefärbter, nebeneinanderliegender Pixel dargestellt. Der so erzeugte Rastereffekt, englisch Dithering genannt, ermöglicht mit den entstandenen "Hybridfarben" eine grössere Farbvielfalt; dafür wirken per Dithering eingefärbte Flächen leicht unruhig, und Dithering steigert den Platzbedarf GIF-komprimierter Bilder stark.
Um angesichts des beschränkten Farbumfangs wenigstens eine durchgängig einheitliche Farbdarstellung zu gewährleisten, legten die Programmierer der ersten Netscape-Version eine Palette von 216 Farbnuancen fest, die vom Browser zumindest auf Windows- und Mac-Systemen grundsätzlich nicht gerastert werden.
Warum 216 und nicht 256? Von den 256 verfügbaren Farben einer 8-Bit-Palette reserviert das Windows-Betriebssystem 20 für seinen eigenen Bedarf; weitere 13 benötigt Netscape für sein Logo - bleiben 223 Möglichkeiten. Die darunterliegende Zahl 216 entspricht dem Kubus von 6 (6x6x6) und lässt eine elegante Einteilung der Palette in sechs Ebenen mit jeweils 36 Farbnuancen zu, die zusammen den "Netscape-Farbwürfel" ergeben. Die RGB-Werte aller Farben in diesem Normwürfel setzen sich aus Vielfachen von 51 zusammen (51 ist ein Fünftel des 8-Bit-Maximalwerts 255 und bringt eine gleichmässige Einteilung auf jede Achse des Würfels); dies entspricht hexadezimal "33". Mögliche Kombinationen sind also zum Beispiel "CC6633" (dunkles Orange) oder "FFFF00" (intensives Gelb). Schwarz ist "000000", weiss "FFFFFF".
Die gleiche Palette wurde danach auch von den übrigen PC-Browser-Herstellern übernommen; sie gilt also nicht nur im Netscape Navigator, sondern auch im Internet Explorer. Etwas anders sieht es unter Unix aus: Dort verwendet der Netscape-Browser je nach Anzahl der frei verfügbaren Farben einen Farbraum mit 6x6x6, 5x5x5 oder 4x4x4 Nuancen.
Das Dithering-Problem ist indes nicht so gravierend, wie es die ausgedehnte Erwähnung der 216er-Palette in sämtlichen Webgrafik-Tutorials vermuten lässt: Es gibt immer weniger Systeme, die mit einer 8-Bit-Palette auskommen müssen. Die Zahlen von StatMarket weisen nach, dass die Websurfer heute mit 56 Prozent auf High-Color-Systemen surfen (Farbtiefe 16 Bit, 65'536 Farben); weitere 38 Prozent nutzen TrueColor (24 oder 32 Bit, 16,7 Millionen Farben). Auf 8 Bit beschränken sich nur mehr 6 Prozent der Webteilnehmer.
Die Experten von Webmonkey haben sich die Mühe gemacht und die websichere Palette auf verschiedenen Systemen getestet, indem sie eine Seite mit allen 216 Farben von Auge überprüften. Der Clou dabei: Für jede Farbe wurde in der Mitte einer Tabellenzelle ein kleines quadratisches GIF-Bild plaziert, das in der gleichen Farbe erstellt wurde, mit der auch der Zellenhintergrund spezifiziert war.
Idealerweise sollte das GIF im Test nicht zu sehen sein - schliesslich hatte es die exakt gleiche RGB-Farbe wie der Hintergrund. Da aber die Browser mit dem IMG-Befehl plazierte Bilder mit einer anderen Methode zur Anzeige bringen als den Hintergrund, kann das GIF unter Umständen doch sichtbar werden.
Wie erwartet, bot die Testseite auf TrueColor-Systemen keinerlei Probleme: Die 216er-Palette ist eine Untermenge der TrueColor-Palette; ein TrueColor-System stellt alle denkbaren 8-Bit-Farben dar. Im High-Color-Modus dagegen erlebten die Tester einen Schock: In den meisten Browsern waren viele Quadrate deutlich zu erkennen. Der Grund: Die 16-Bit-HighColor-Palette ist mit der 24-Bit-TrueColor-Palette und damit auch der 8-Bit-Palette eigentlich nicht kompatibel. Eine Farbe aus der normierten 8-Bit-Palette liegt vom prozentualen R-, G- und B-Anteil jeweils zwischen zwei Farben der 16-Bit-Palette. Dummerweise wählen die Browser manchmal für den Hintergrund den nächsthöheren und für das IMG-Bild den tieferen Wert (oder umgekehrt), und schon ist es vorbei mit der einheitlich eingefärbten Fläche - ein Problem, über das sich wohl mancher Designer von Seiten schon den Kopf zerbrochen hat.
Das Fazit: Unter dem Dithering-Aspekt bietet die Web-sichere Palette gute Dienste, sie garantiert der Mehrzahl aller Websurfer (PC, Mac) rasterfreie Farbflächen unabhängig von der Farbtiefe. Aber sie bringt dem Löwenanteil der Surfer, der mit 16 Bit unterwegs ist, ein neues Problem, das allerdings nur auf entsprechend gestalteten Seiten mit bestimmten Farben zutage tritt. Für den Webdesigner bedeutet dies, dass Seiten mit farbigem Background und davorliegenden Grafiken, die sich nahtlos einfügen sollen, speziell auch mit einer Farbtiefe von 16 Bit getestet werden müssen.
