12 Ausgabe für das Web
Bilder, die eingebunden in HTML-Seiten über das Web zum Betrachter gelangen sollen, müssen komprimiert werden, weil unkomprimierte Formate, z. B. TIFF oder Photoshop, viel zu große Dateien ergeben würden. Zwei Formate leisten diese Arbeit in den allermeisten Fällen: das JPEG- und das GIF-Format. Beide sind der Quasi-Standard für Bilder im Web. Dass es zwei sind, hat eher historische Gründe, weil keines von beiden ideal für alle Anwendungszwecke funktioniert. Beide haben ihre Vor- und Nachteile. Auch wenn Photoshop schon seit langer Zeit beide Ausgabeformate beherrscht, haben doch erst die immer konkreter werdenden Anforderungen des Webdesigns dazu geführt, dass Adobe bei Photoshops Dateiausgabe für das Web das Letzte aus den beiden schon sehr betagten Formaten herausgekitzelt hat.
Die permanente Herausforderung, eine möglichst gute Bildqualität bei möglichst geringer Dateigröße zu erreichen, um damit im Internet Bandbreitenschonung und möglichst schnelle Übertragung zu erreichen, hat zu einem eigenen Ausgabe-Dialog geführt: Unter Datei · Für Web speichern findet man Photoshops Schaltzentrale für die hoch komprimierten Web-Bildformate.
12.1 Bildformate im Web 
12.1.1 JPEG
JPEG-Bilder basieren auf einem so genannten verlustbehafteten Kompressionsverfahren. Es wird auf Bildinformationen verzichtet, um die Dateigröße zu reduzieren. Die dem JPEG-Verfahren zu Grunde liegende diskrete Cosinus-Transformation (DCT) eliminiert feine Bilddetails zu Gunsten größerer, detailärmerer Flächen, die sich durch dieses Verfahren Platz sparend beschreiben lassen. Deswegen wirken zu stark komprimierte Bilder bei JPEG immer unscharf. Bei der DCT wird das Bild in so genannte Blocks aufgeteilt, die 8x8 Pixel groß sind. Durch diese Untereinheiten gestaltet sich der interne Rechenaufwand ökonomisch. Wird zu stark komprimiert, werden diese 64-Pixel-Blocks als typische sogenannte JPEG-Artefakte sichtbar (Abbildung 12.1). Die JPEG-Kompression kann in weiten Grenzen eingestellt werden. Bei geringer Kompression sind Qualitätsunterschiede mit freiem Auge nicht zu erkennen. Starke Kompression kann bis zur Unkenntlichkeit des Originalbildes führen. Zwischen diesen beiden Extremen liegt immer der Kompromiss zwischen Einsparungen bei der Dateigröße und akzeptablen Verlusten bei der Bildqualität.
Abbildung 12.1 Block-Artefakte bei starker JPEG-Kompression
Da »natürliches« Bildmaterial, also Fotos (Porträts, Landschaften, Gegenstände usw.), nie so messerscharf abbildet wie computergenerierte Grafik (Illustrationen, Logos, z. T. 3D-Renderings usw.), kann die JPEG-Kompression durch diese allgegenwärtige zumindest leichte Unschärfe solche Bilder gut komprimieren, ohne dass Verluste sichtbar werden. JPEG ist also praktisch immer das Mittel der Wahl bei Fotos.
Weil JPEG bereits Anfang der 90er-Jahre von der Joint Photographic Experts Group definiert wurde, ist es technisch schon lange nicht mehr auf der Höhe der Zeit. Da es aber extrem weit verbreitet ist, führt kein Weg daran vorbei.
Das Nachfolgeformat, JPEG 2000, ist zwar schon definiert und als Standard verabschiedet, aber noch kaum verbreitet. Photoshop beherrscht es aber bereits. Im Web ist JPEG 2000 bis jetzt nur mit einem Browser-PlugIn zu betrachten. Es benutzt ein komplett anderes Kompressionsverfahren, das die Dateigröße sehr viel effizienter reduzieren kann, wobei die Bildqualität viel weniger leidet als bei JPEG. JPEG 2000 unterstützt im Gegensatz zum alten Format auch Transparenzen. Bis es etabliert ist, wird aber noch einige Zeit vergehen.
12.1.2 GIF
Das GIF-Format (Graphic Interchange Format) ist ebenfalls ein Veteran im Bereich der Bildformate. Es wurde 1987 vom damaligen Onlinedienst CompuServe eingeführt. Es basiert ebenfalls auf einer verlustbehafteten Kompression. Diese funktioniert allerdings anders als bei JPEG. Farb-JPEGs haben immer 24 Bit Farbtiefe, können also 16,7 Millionen Farben darstellen, während das GIF-Format immer nur von maximal 256 Farben ausgeht. Die Datenreduktion findet also statt, indem die Farbtiefe drastisch verringert wird. Je nach Methode werden die häufigsten 256 Farben aus dem Bild ermittelt und jedem Original-Pixel der nächstähnliche Farbwert zugewiesen. Alternativ wird von bis zu 256 Farben aus definierten Farbtabellen ausgegangen.
Eine der 256 möglichen Farben kann als transparent definiert werden und wird bei der Darstellung im Browser ausgeblendet. Da nur entweder voll transparent oder voll deckend möglich ist, und keinerlei Zwischenwerte, ist diese Transparenz nicht mit den 8-Bit-Graustufenkanälen von Photoshop vergleichbar.
GIF komprimiert in zwei Schritten. Nach der Reduktion der Farbtiefe auf maximal 256 (und minimal 2) Farben wird mit dem LZW-Verfahren komprimiert, das zum Beispiel auch vom TIFF-Format unterstützt wird. LZW (Lempel-Ziv-Welch) reduziert die Daten anhand der Häufigkeit, mit der bestimmte Daten vorkommen. Das hat zur Folge, dass Bilder, in denen große, zusammenhängende und vor allem gleichmäßige Farbflächen vorkommen, besonders gut komprimiert werden können. GIF eignet sich deshalb sehr gut für Grafik und Illustrationen, Logos und die Darstellung von Schrift.
Das GIF-Format ist zwar in seiner Verwendung im Internet ebenso weit verbreitet wie das JPEG-Format, aber es basiert nicht wie JPEG auf der Verabschiedung eines Standards durch ein Gremium, sondern ist von Compuserve als Firma eingeführt worden. Auf dem LZW-Verfahren lag allerdings ein Patent, das die Firma Unisys gehalten hat. Drohende Lizenzforderungen für jede Verwendung des Verfahrens in Software oder im Internet haben zur Entwicklung des Nachfolgers PNG geführt. Auch wenn die strittigen Patente in den vergangenen beiden Jahren ausgelaufen sind, hat das GIF-Format ein Ablaufdatum, auch weil es technisch veraltet ist. Vorerst spielt es noch eine Rolle.
12.1.3 PNG
Das PNG-Format (Portable Network Graphics) wurde entwickelt, weil das weit verbreitete GIF-Format von Lizenz- und Patentproblemen belastet und technisch nicht mehr zufriedenstellend war. PNG ist ein offenes Format mit frei zugänglicher Spezifikation (Open Source) und frei von Lizenzen. PNG teilt sich in zwei Unterformate auf, PNG-8 und PNG-24, womit ihre Farbtiefe gekennzeichnet wird.
Das PNG-8-Format ist als der eigentliche direkte Nachfolger des GIF-Formats gedacht. Mit 8 Bit Farbtiefe umfasst es wie GIF maximal 256 Farben, von denen eine für die Definition einer Transparenz benutzt werden kann. Die Farbtiefe kann auch hier bis auf 2 Farben reduziert werden. PNG-24 umfasst 24 Bit Farbtiefe, die mit einem Alpha-Kanal mit 8 Bit erweitert werden können. Damit sind qualitativ hochwertige Transparenzen möglich.
PNG benutzt eine an sich verlustfreie Kompression, die auf dem Verfahren basiert, mit dem man ZIP-Dateien erstellen kann. Um das noch effektiver zu machen, gibt es fünf Filtermethoden, mit denen das Bild vor der Kompression optimiert werden kann (None, Sub, Up, Average, Paeth).
Ähnlich wie das GIF-Format gibt es auch bei PNG das Interlacing, das einen allmählichen Bildaufbau bei langsamen Internetverbindungen erlaubt. Je mehr vom Bild heruntergeladen wurde, desto schärfer wird es. Dies ist der einzige Parameter, der bei Photoshops Einstellungen zum PNG-Format außer der Wahl der Farbtiefe und der Farbreduktion bei PNG-8 zugänglich ist. Macromedia Fireworks, dessen Bilddateiformat auf PNG-24 aufbaut, bietet da mehr Möglichkeiten. Angesichts der immer weiter fortschreitenden Verbreitung von PNG im Web wäre es wünschenswert, dass Adobe die PNG-Blackbox aufmacht.
Abbildung 12.2 PNG-24 unterstützt die volle Transparenz von Photoshop-Ebenen.
Die Zahl der Browser, die PNG unterstützen, ist mittlerweile sehr ansehnlich. Außer Microsoft, das auch hier wieder einmal sein eigenes Süppchen kocht, sind Opera, Netscape, Firefox und Mozilla neben seinen Derivaten wie Safari oder Camino in der Lage, PNG-8 und PNG-24 korrekt darzustellen. Beim Microsoft Internet Explorer als häufigstem Browser muss man noch ein wenig warten. Mit der Version 7 soll PNG vollständig unterstützt werden. Witzigerweise hat der schon lange nicht mehr von Microsoft unterstützte Internet Explorer 5.2 für Mac keine Probleme mit PNG-24.
Abbildung 12.3 PNG-24 mit 8-Bit-Transparenz (oben) und PNG-8 mit 1-Bit-Transparenz (unten) in Firefox 1.0.6 (links) und Microsoft Internet Explorer 6.0 (rechts) auf Windows
Das PNG-Format hat neben seiner Lizenzfreiheit viele weitere Vorteile. Der volle 8-Bit-Alpha-Kanal wird sicher in der näheren Zukunft dankbar von der Webdesigner-Gemeinde angenommen werden, wenn bald die volle Unterstützung durch alle wichtigen Browser gegeben ist.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
