Grafiken Teil 4/3.1 Seite 1

Teil 4/3.1 Seite 1 Grafikprogramme 4/3 Die Dokumente im World Wide Web profitieren von den grafischen Elementen, obwohl komplexere den Datentransfer wesentlich verlangsamen können. Neben den Informationen über die Erstellung bzw. die Auswahl von Bildern werden die Vor- und Nachteile verschiedener Bildformate aufgezeigt. Erstellung und Auswahl von Sie erfahren, aus welchen Quellen Sie die erhalten können, welche Grafikformate sich am besten für Ihren Web-Bereich eignen, wie man transparente, Interlaced- und animierte GIFs erstellt, wie man Bilder in das JPEG- und PNG-Format konvertiert und wie man Thumbnails erstellt Darüber hinaus finden Sie einige Empfehlungen zur Optimierung der Übertragungszeiten für Grafikdateien. 4/3.1 Grafikprogramme Für den Aufbau eigener Bilder gibt es eine Reihe ausgezeichneter Produkte. Dafür kommen vor allem die Programme in Frage, mit denen die am Bildschirm manipuliert werden können. Grafikprogramme unterstützen überwiegend den Aufbau von Vektor- oder Rastergrafiken. Vektorgrafiken enthalten mathematische Gleichungen, die den Aufbau des Bildes und die Beziehungen zwischen den am Bildschirm angezeigten Objekten beschreiben: ein Grund, weshalb solche Bilder meist im Bereich der CAD-Entwicklung eingesetzt werden, in dem frei skalierbare Liniengrafiken benötigt werden. Vektorgrafiken

Teil 4/3.1 Seite 2 Grafikprogramme Rastergrafiken Grafikprogramme In den Rastergrafiken sind Informationen abgespeichert, wo und in welcher Farbe ein bestimmter Bildpunkt (Pixel) am Bildschirm angezeigt wird. Diese eignen sich hervorragend für die Repräsentation von Fotos und Bildern. Derzeit werden von allen gängigen Browsern in erster Linie nur Bitmap-Grafikdateien unterstützt. Deshalb sollten Sie sich ein Grafikprogramm zulegen, das diesen Bildtyp unterstützt. Nachfolgend finden Sie eine Zusammenstellung gängiger Programme für die verschiedenen Systemplattformen. Name Beschreibung Info/Download-Adresse Adobe Photoshop Auto Sketch MGI-Grafiksoftware Corel Fractal Design GIF Construction Graphics Workshop Kinetix PaintShop Pro Optimiertes Profi-Grafikprogramm für Web-Publishing Vektororientiertes Profi- Grafikprogramm Photo-Suite, Calamus DTP-Programm usw. Professionelle Suite aus Grafikprogrammen für verschiedene Aufgaben Grafiksoftware für Painting, Rendering und Spezialeffekte Programm für die Erstellung animierter GIF- Pixel-Programm mit vielen nützlichen Leistungsmerkmalen Spezialsoftware für Morphing, Animation usw. Umfangreiches und sehr gutes Shareware- Bildbearbeitungsprogramm http://www.adobe.com/prodindex/ photoshop/main.html http://www.autodesk.com/products/ autocad/asketch/autosket.htm http://www.mgisoft.com/products/ http://www.corel.com/products/ graphicsandpublishing/ http://www.fractal.com/products/ http://www.mindworkshop.com/ alchemy/gifcon.html http://www.mindworkshop.com/ alchemy/gww.html http://www.ktx.com/ http://www.jasc.com/ Tabelle 4/3.1-1: Grafikprogramme für Windows 3.x/95/NT.

Teil 4/3.1 Seite 3 Grafikprogramme Name Beschreibung Info/Download-Adresse Adobe Photoshop Corel Fractal Design Für Web-Publishing optimiertes Profi-Grafikprogramm Professionelle Suite aus Grafikprogrammen für verschiedene Aufgaben Grafiksoftware für Painting, Rendering und Spezialeffekte Tabelle 4/3.1-2: Grafikprogramme für Macintosh http://www.adobe.com/prodindex/ photoshop/main.html http://www.corel.com/products/ graphicsandpublishing/ http://www.fractal.com/products/ Name Beschreibung Info/Download-Adresse NeoN Grafix Profi-Grafiksuite mit Pixel-, Vektor- und 3D-Grafiksoftware http://www.neongrafix.com/ PMView Pixel-Programm http://www.bmtmicro.com/ pmview/ Tabelle 4/3.1-3: Grafikprogramme für OS/2 Name Beschreibung Info/Download-Adresse Adobe Photoshop Corel Für Web-Publishing optimiertes Profi-Grafikprogramm Professionelle Suite aus Grafikprogrammen für verschiedene Aufgaben http://www.adobe.com/prodindex/ photoshop/main.html http://www.corel.com/products/ graphicsandpublishing/ MetaTools Kai's Power Tools und andere http://www.hsc.com/ Tabelle 4/3.1-4: Grafikprogramme für Unix-Derivate

Teil 4/3.1 Seite 4 Grafikprogramme

Teil 4/3.2 Seite 1 Einsatz bestehender Bilder 4/3.2 Einsatz bestehender Bilder In vielen Fällen sind die und Bilder, die Sie auf Ihrem Web-Bereich verwenden möchten, bereits in irgendeiner Form vorhanden. Oftmals müssen diese Bilder vor der Veröffentlichung auf dem Web zuerst in ein digitales Format umgewandelt und nachträglich retuschiert werden. Wenn Sie sich mit diesem Thema näher beschäftigen möchten, haben Sie die Auswahl unter verschiedenen Optionen: Eine immer größere Anzahl von kostengünstigen Scannern kann alle möglichen Arten von Bild- und Textinformationen einlesen. Die Bilder können mit einem entsprechenden Programm nachbearbeitet und in einem Browser-kompatiblen Format gespeichert werden. Neben diesem traditionellen Verfahren gibt es die Möglichkeit, Bilder und von einer Kodak-Foto-CD zu übernehmen. Eine Foto-CD kann bis zu einhundert Bilder enthalten. Bevor Sie sich für den Kauf einer solchen CD entscheiden, sollten Sie prüfen, ob auf Ihrem Rechner alle technischen Voraussetzungen für die Übernahme der Bilder gegeben sind. In letzter Zeit gibt es immer mehr Kameras, bei denen sich die Bilder im digitalen Format auf einer Diskette abspeichern oder direkt an Ihren PC bzw. Mac übertragen lassen. Der Vorteil dieser Geräte besteht darin, dass die Bildinformation digital vorliegt, sofort eingelesen und weiter bearbeitet werden kann. Cliparts ermöglichen die Arbeit mit Bildern, die bereits im digitalen Format vorliegen. Im Web gibt es einige Bereiche, von denen Sie einzelne Cliparts oder ganze Bibliotheken abholen können. Bei der Abholung solcher Bilder aus dem Web sind die einschlägigen Copyright-Bedingungen zu beachten. Scanner Kodak-Foto-CD Digitale Kameras Cliparts

Teil 4/3.2 Seite 2 Einsatz bestehender Bilder Web-Bereich Backgrounds Texture Land Caboodles ClipartCom Barry s Clipart Server FreeArt Cliparts Cliparts als ZIP-Pakete (FTP-Verzeichnis) Free Web Page Graphics Info/Download-Adresse http://home.netscape.com/assist/net_sites/bg/ backgrounds.html http://www.meat.com/textures/ http://www.caboodles.com/ http://www.clipart.com/ http://www.barrysclipart.com/ http://www.mccannas.com/free/freeart.htm Tabelle 4/3.2-1: Download-Adressen für Cliparts ftp://ftp.uni-stuttgart.de/pub/systems/acorn/riscos/ graphics/pictures/ http://www.onebellevue.com/graphics/index.html

Teil 4/3.3 Seite 1 4/3.3 Autoren: Hans Hajer, Bernhard Gruber Das Graphics Interchange Format (kurz GIF) wurde 1987 von dem Online-Unternehmen CompuServe entwickelt. Ursprünglich diente es dem Austausch von Grafikdateien mittels E-Mail. Das lässt schon darauf schließen, dass die gespeicherten in einem möglichst speicherplatzschonenden Format abgelegt werden. Eine GIF-Datei besitzt eine maximale Farbtiefe von 256 Farben. GIF-Dateien werden gerne als eingebettete eingesetzt, da die meisten Browser dieses Bildformat unterstützen und (fast) nur bei diesem Verfahren transparente Hintergründe einsetzbar sind. eignet sich vor allem für CompuServe Schwarzweißbilder und Texte, Bilder mit einer begrenzten Anzahl von Farben, mit scharfen Konturen z. B. Menüs, Schaltflächen etc. und, die mit Texten unterlegt sind. Der aktuelle Standard des GIF-Formats ist das so genannte 89er-Format. Dieses Format bietet drei Möglichkeiten, die den Einsatz im WWW besonders interessant machen: Die Möglichkeit, eine Grafik interlaced abzuspeichern. Ein solches Bild wird beim Laden nicht zeilenweise, sondern schichtweise aufgebaut zuerst wird also ein grobes Bild angezeigt, das sich immer weiter verfeinert. Die Möglichkeit zum Aufbau von Animated GIFs : Dabei werden mehrere in einer einzigen Grafikdatei gespeichert und beim Aufruf über bestimmte Optionen gesteuert. Über diese Funktionalität lassen sich animierte realisieren. Die Möglichkeit, eine Farbe als transparent zu definieren. Mit Hilfe dieses Leistungsmerkmals können Sie transparente Hintergründe einrichten, wodurch der Eindruck entsteht, dass die Grafik auf der Web-Seite schwebt.

Teil 4/3.3 Seite 2 Vorteile des GIF-Formats Die wichtigsten Vorteile des GIF-Formats lassen sich wie folgt zusammenfassen: Transparenz, Kompression, Interlacing: 2, 4, 8, 16, 32, 64, 128 und 256 Farben für optimale Größe und Kompression Unterstützt von fast allen gängigen Browsern Keine Plug-Ins oder zusätzliche Software notwendig Getestet unter Win 3.1x, Win95, MAC, Unix, Sun, Linux und Irix Restriktionen Versionen In die Grafikdatei können mehrere Bilder zusammengepackt werden. Die maximale Auflösung pro Bild beträgt 16000*16000 Pixel bei einer Farbtiefe von 8bit (256 Farben) mit jeweils eigener Farbtabelle. Auf den ersten Blick mutet dies in der heutigen Zeit (11 Jahre sind ja mehrere Computer- Generationen) sehr wenig an. Für Internetanwendungen allerdings, die durch die Ladezeiten immer zeitkritisch sind, genügen diese Merkmale aber meist. Moderne Grafikkarten unterstützen inzwischen HighColor (16 bit = 65536 Farben) und TrueColor (24 bzw. 32 bit = 16,7 Mio Farben) ohne Probleme. Dadurch wird der unliebsame Umschalteffekt bei mit verschiedenen Farbtabellen, wie er bei GIF- Dateien vorkommen kann, vermieden. GIF liegt in den Versionen GIF87a (Mai 1987) und GIF89a (Juli 1989) vor. Da CompuServe das Patent hält, handelt es sich um einen de facto-standard. Die neuere Version enthält gegenüber der ursprünglichen Version zusätzliche Fileblocks, in denen beispielsweise eine Transparenzfarbe definiert oder Kommentare des Autors abgelegt werden können. Doch dazu mehr weiter unten. Zunächst einmal soll im Folgenden der strukturelle Aufbau einer GIF-Datei erklärt werden, um dann auf die genaue Bedeutung aller Daten einzugehen.

Teil 4/3.3 Seite 3 Struktureller Aufbau von GIF-Dateien Die Informationen werden in Blöcken verwaltet. Dabei können drei Arten von Blöcken unterschieden werden: Blöcke Kontrollblöcke Grafikdatenblöcke Spezialblöcke Kontrollblöcke steuern die Abarbeitung der einzelnen innerhalb der GIF-Datei. Dazu gehören beispielsweise der Header und die Beschreibung des logischen Bildschirms. Grafikdatenblöcke enthalten neben der eigentlichen Grafikinformation auch Farbtabellen. Die Spezialblöcke zu guter Letzt werden in aller Regel von Softwareherstellern für Kommentare oder programmspezifische Informationen verwendet. Die meisten Bildbearbeitungsprogramme und auch Internetbrowser werten diese Blöcke nicht aus. Abbildung 4/3.3-1: Struktur einer GIF-Datei In Abbildung 4/3.3-1 ist die Struktur einer GIF-Datei schematisch dargestellt. Es ist anzumerken, dass nicht alle Blöcke zwingend enthalten sein müssen. Zur Speicherung eines einzigen Bildes genügen die Blöcke Header, Logical Screen Descriptor, Image Descriptor und Image Data Table. Abgeschlossen werden muss die Datei immer mit dem Trailer. Struktur einer GIF-Datei

Teil 4/3.3 Seite 4 Wiederholung von Blöcken Die Speicherung mehrerer Bilder in einer Datei ist möglich; deshalb können sich die Blöcke Image Descriptor, Local Color Map, Local Extensions und Image Data Table beliebig oft wiederholen. Im Folgenden wird auf den Aufbau der einzelnen Blöcke näher eingegangen. Alle Definitionen beziehen sich auf den Standard GIF89a. Soweit diese nicht für GIF87a gültig sind, ist dies explizit vermerkt. In allen gängigen Anwendungen allerdings spielt ausschließlich der neuere Standard eine Rolle. Ältere Programme, die noch auf GIF87a aufgebaut sind, können das neuere Dateiformat zwar trotzdem verarbeiten, einige Informationen werden aber nicht interpretiert und können zu fehlerhafter Darstellung führen. Header GIF-Header Jede GIF-Grafikdatei beginnt mit einem 6 Byte langen Header. Dieser dient ausschließlich der Identifikation der Datei. Die ersten drei Byte enthalten den String GIF, während die letzten drei den Standard explizit kennzeichnen. Der Header ist immer der erste Block in der Datei und muss zwingend vorhanden sein. Abbildung 4/3.3-2: Dateiheader Logical Screen Descriptor Anzeigebereich Direkt nach dem Header muss der Logical Screen Descriptor folgen. Hier werden alle Daten zusammengefasst, die den Anzeigebereich virtuell definieren. Die Angaben müssen nicht in Hardware umsetzbar sein, sondern können sich auch auf ein Fenster oder auf den Druckbereich eines Druckers beziehen. Abbildung 4/3.3-3 zeigt den Aufbau des Blocks.

Teil 4/3.3 Seite 5 Abbildung 4/3.3-3: Logical Screen Descriptor Die Werte Logical Screen Width und Logical Screen Height sind bezogen auf die obere linke Ecke des virtuellen Anzeigebereichs. Bei den Color Flags handelt es sich um ein in einem Byte untergebrachtes Bitfeld, das Einstellungen der verwendeten Farbtabellen und deren Interpretation enthält (Abbildung 4/3.3-4). Das höchstwertige Bit (Global Color Table Flag) zeigt an, ob eine globale Farbtabelle definiert ist. Ein gesetztes Bit bedeutet, dass nach dem Logical Screen Descriptor der Global Color Table folgen muss. Außerdem muss das Byte Background Color Index interpretiert werden. Dieses ist ein Zeiger in die globale Farbtabelle und gibt die Farbe an, die für alle Pixel verwendet werden muss, die das gespeicherte Bild nicht abdeckt. Ist die globale Farbtabelle nicht aktiv, sollte auch der Zeiger auf NIL (0) stehen. Die ersten drei Bit (Size of Global Color Table) der Color Flags geben die Größe der globalen Farbtabelle im 2er- Komplement an, wobei der angegebene Wert um eins erhöht werden muss. ColorFlags Größe der Farbtabelle

Teil 4/3.3 Seite 6 Die Größe der Tabelle berechnet sich also wie folgt: 2 ^ (Wert + 1) Drei gesetzte Bits geben also eine Farbtabelle mit 256 Farben an. Ist die globale Farbtabelle ausgeschaltet (Bit 7 = 0), sollte dieser Wert trotzdem nicht außer Acht gelassen werden: durch die korrekte Angabe kann zumindest die Anzahl der zu verwendenden Farben (gültige Bits pro Pixel) definiert werden. Abbildung 4/3.3-4: Color Flags SortFlag Das Sort Flag ist gesetzt, wenn die globale Farbtabelle nach der Häufigkeit der verwendeten Farben sortiert ist. In diesem Fall stehen die häufigsten Farben am Anfang der Tabelle. Der Sinn einer Sortierung liegt in einer hardwareunabhängigen Darstellung der Grafik. So ist es auch Maschinen mit weniger als den gespeicherten Farben möglich, das Bild mit der größtmöglichen Genauigkeit wiederzugeben, indem aus der Tabelle die ersten Farben gewählt werden. Bei modernen Maschinen mag dies zwar archaisch anmuten; Anwendung findet dies aber beispielsweise in der Verwendung von monochromen Bildschirmen (z.b. NCD-X-Terminals), bei denen aus der Benutzung der Farbhäufung eine möglichst gute Umsetzung in Graustufen errechnet werden kann.

Teil 4/3.3 Seite 7 Die verbleibenden Bits 4 bis 6 der Color Flags haben eher informativen Charakter. Sie geben die Anzahl der verwendeten Farben in der Originalpalette während der Erstellung der Grafik an. Das Speicherformat ist das Gleiche wie bei Size of Global Color Table. Bleibt noch das letzte Byte des Logical Screen Descriptor., die Pixel Aspect Ratio. Diese gibt an, in welchem Verhältnis Höhe und Breite der Auflösung auf der erzeugenden Maschine war. Bei stark abweichendem Verhältnis kann die Grafik durch Interpolation wieder annähernd richtig angezeigt werden. Das Verhältnis errechnet sich wie folgt: Originalpalette PixelAspectRatio V = (Pixel Aspect Ratio + 15) / 64 Es ist definiert als der Quotient aus Breite dividiert durch Höhe der Grafik und kann in der Genauigkeit von 1/64 angegeben werden. Zu bemerken ist noch, dass im Format GIF87a lediglich 6 der 7 Bit genutzt werden. Global Color Table Die globale Farbtabelle folgt dem Logical Screen Descriptor, wenn das Global Color Table Flag in den Color Flags gesetzt ist. Für jede eingetragene Farbe werden 3 Byte gespeichert, die den Rot-, Grün- und Blauanteil der Farbe enthalten, wodurch ein Spektrum von maximal 16,7 Millionen Farben (True Color) abgedeckt werden kann. Gleichzeitig verwendet werden können höchstens 256 Farben. Die Größe der Tabelle errechnet sich aus Size of Global Color Table multipliziert mit 3. Die abgespeicherten Farbwerte werden für alle, die über keine eigene lokale Farbtabelle verfügen und auch die Plain Text Extensions verwendet. Die Global Color Table ist ein optionaler Eintrag und kann auch weggelassen werden. Die Farbwerte werden dann entweder über die lokalen Farbtabellen oder über die Standardfarben der entsprechenden Hardware dargestellt. Farbtabelle

Teil 4/3.3 Seite 8 Image Descriptor Lage und Größe der Grafik Die einzelnen in einer GIF-Datei gespeicherten werden mit einem Image Descriptor eingeleitet. Darin werden Angaben zur Lage und Größe der Grafik innerhalb des virtuellen Anzeigebereichs und zur Darstellungsweise abgelegt (Abbildung 4/3.3-5). Je ein Image Descriptor pro Grafik muss vorhanden sein. Abbildung 4/3.3-5: Image Descriptor Das erste Byte ist der Image Separator. Es handelt sich dabei um ein Komma (ASCII-Zeichen 2Ch) und dient der Trennung einzelner Grafikblöcke. Die folgenden 4 Bytes enthalten die obere linke Ecke der Grafik relativ zum virtuellen Anzeigebereich und ist in Pixeleinheiten angegeben, ebenso wie die Breite und die Höhe der Grafik, die in den Bytes 5 bis 8 abgelegt sind. Die Zählung beginnt bei 0, alle Daten sind als vorzeichenlose 16bit-Werte gespeichert. Die Image Flags enthalten ein Bitfeld, das ähnlich den Color Flags aufgebaut ist (Abbildung 4/3.3-6).

Teil 4/3.3 Seite 9 Abbildung 4/3.3-6: Image Flags Der erste Eintrag, Size of Local Color Table, ist analog zu Size of Global Color Table im Logical Screen Descriptor Block aufgebaut. Die Bits 3 und 4 sind reserviert und normalerweise gelöscht. Bit 5 ist das Sort Flag, das die gleiche Aufgabe wie das Pendant im Logical Screen Descriptor erfüllt. Im GIF87a-Format ist dieses Bit ohne Bedeutung, es ist gelöscht. Das Interlace Flag gibt an, in welcher Reihenfolge die Pixelzeilen der Grafik gespeichert sind und während des Auslesens aus dem Image Data Table dargestellt werden müssen. Ein gelöschtes Bit steht für die zeilenweise Speicherung, beginnt also mit der ersten und geht kontinuierlich bis zur letzten durch. InterlaceFlag Interessant ist ein gesetztes Interlace Flag: Die Pixelzeilen werden dann nicht kontinuierlich gespeichert, sondern in vier Gruppen. Die ersten beiden Gruppen enthalten jede achte Zeile, Gruppe 3 jede vierte und Gruppe 4 jede zweite Zeile. Gelesen und angezeigt werden die Gruppen in aufsteigender Reihenfolge, wobei die jeweils noch ungelesene Zeilen als Kopien der darüberliegenden dargestellt werden (Abbildung 4/3.3-7). GIF wurde zur Übertragung von Grafikdaten mittels Online-Verbindungen, die zum Teil leider immer noch recht

Teil 4/3.3 Seite 10 langsam sein können, entwickelt. Durch die Interlace- Methode steht eine Möglichkeit zur Verfügung, die Grafik schrittweise schärfer darzustellen. So bekommt der Betrachter schon nach kurzer Ladezeit einen groben Eindruck der Grafik und muss nicht warten, bis das Bild von oben nach unten zeilenweise aufgebaut wird. Abbildung 4/3.3-7: Ladevorgang im Interlaced-Modus Das letzte Bit der Image Flags ist das Local Color Table Flag. Ist dieses gesetzt, folgt unmittelbar anschließend die Local Color Map. Local Color Table Individuelle Farbtabelle Ist die lokale Farbtabelle aktiv, wird die Grafik mit den Farbdaten aus dieser Tabelle angezeigt. Die Einträge der globalen Farbtabelle werden dadurch temporär ungültig. Der Aufbau der Tabelle ist identisch mit dem Global Color Table. Durch die Verwendung der lokalen Farbdefinitionen ist es möglich, mehr als 256 Farben für die gesamte GIF-Datei zu benutzen, wobei die Farbanzahl pro Bild auf diesen Wert beschränkt bleibt.

Teil 4/3.3 Seite 11 Image Data Table Die eigentlichen Grafikdaten werden im Image Data Table festgehalten. Die einzelnen Bytes sind Zeiger in die derzeit aktuelle Farbtabelle. Zur Speicherung wird dabei eine erweiterte Form der LZW- Kompression, ein Packalgorithmus nach Lempel, Ziv und Welch, verwendet. Dieses Verfahren basiert auf der so genannten variable length code-kompression. Hierbei werden, ausgehend von einer minimalen Codelänge in Bit, wiederkehrende Zeichenfolgen in der Originaldatei durch definierte Bitreihen ersetzt, sodass im Idealfall die häufigste Zeichenfolge durch die kleinste Bitreihe repräsentiert wird. Dadurch können bei gleichförmigen Daten, wozu in der Regel auch Bilddaten gehören, hohe Kompressionsraten erreicht werden. Die Datei wird von Anfang bis Ende durchgelesen, und für jede neu erkannte Zeichenfolge wird eine neue eindeutige Bitreihe in einer temporären Tabelle angelegt. Bereits vorhandene Muster werden durch den entsprechenden Tabelleneintrag ersetzt. Je mehr unterschiedliche Zeichenfolgen in der Datei vorhanden sind, desto länger werden die einzelnen Bitreihen. Im Rahmen der Definition des GIF-Formats wurde der ursprüngliche LZW-Algorithmus um zwei wesentliche Eigenschaften erweitert: Es wurden zwei Steuercodes eingeführt, der Clear Code und der End of Information Code, und die Länge der Bitreihen wurde auf 3 bis 12 Bit festgelegt. Durch die Beschränkung der Länge kann die Größe der Ersetzungstabelle auf 4096 Einträge begrenzt werden. Außerdem wird dadurch vermieden, dass aus schlecht zu komprimierenden Datenströmen ein größerer Code als das Original entsteht. Sobald eine neu definierte Bitreihe mehr als 12 Bit enthalten würde, wird der Komprimierungsvorgang neu aufgesetzt, das heißt, die aufgebaute Tabelle wird gelöscht und neu initialisiert, der Vorgang beginnt ab dem nächsten gelesenen Byte neu. Hierfür ist der Clear Code verantwortlich. Sobald der Dekompressor auf diesen stößt, beginnt ein neuer Dekompressionszyklus. Der End of Information Code ist lediglich eine Endekennung des Datenstroms und wird immer als letzte Bitreihe ausgegeben. Grafikdaten LZW-Kompression Erweiterung des LZW-Algorithmus

Teil 4/3.3 Seite 12 Abbildung 4/3.3-8: Image Data Table ImageDataTable Einteilung in Blöcke Der Aufbau der Image Data Table ist in Abbildung 4/3.3-8 dargestellt. Das Byte Code Size enthält die minimale Größe der Bitreihen des Komprimierungscodes. In aller Regel ist dieser Wert identisch mit der Angabe Size of Local Color Table beziehungsweise Size of Global Color Table. Die Dekompression beginnt damit, die Anzahl Bits, die in Code Size vermerkt ist, aus dem Datenstrom zu lesen und in die frisch initialisierte Tabelle zu schreiben. Der Clear Code besteht aus einem gesetzten Bit gefolgt von Code Size gelöschten Bits, ebenso der End of Information Code, der lediglich um eins erhöht wird. Die eigentlichen Bitreihen beginnen dann bei Clear Code + 2. Die Block Size gibt die Größe des folgenden Datenblocks an. Ein Block kann maximal 255 Bytes enthalten. Darauf folgt der eigentliche Datenblock. Block Size und Data Bytes werden beliebig oft wiederholt. Das erste Byte im ersten Datenblock ist immer der Clear Code, um den Dekompressor zu initialisieren. Das letzte Byte im letzten Block muss der End of Information Code sein, um den Dekompressor zu stoppen und den erzeugten Datenstrom auszugeben. Die Einteilung der Grafikdaten in Blöcke erscheint zunächst unsinnig, da der Datenstrom ohnehin kontinuierlich abgearbeitet werden muss, um eine korrekte Dekompression zu erreichen. Allerdings bietet sich so Programmen, die nicht die eigentliche Grafikinformation, sondern beispielsweise die Extensions verwerten wollen, die Möglichkeit, schnell durch den Code zu springen, ohne mühsam das Ende der Grafikdaten suchen zu müssen. Der Image Data Table wird mit dem Blockterminator (0h) abgeschlossen.

Teil 4/3.3 Seite 13 Extensions Extensions, zu Deutsch Erweiterungen, können sowohl global als auch lokal definiert sein. GIF87a kennt diese Blöcke nicht. Konzeptionell sind die Extensionblocks so definiert, dass damit eine Vielzahl von Effekten gesteuert werden kann. Standardisiert sind vier verschiedene Blöcke, der Graphic Control Extension Block, der Comment Extension Block, der Plain Text Extension Block und der Application Extension Block. Generell sind alle Erweiterungen wie in Abbildung 4/3.3-9 zu sehen aufgebaut. Im Extension Introducer steht als Kennung immer ein! (ASCII 21h). Anschließend folgt der Function Code, mit dem die Funktionalität des Blocks definiert wird. Davon abhängig ist die Interpretation der Daten in den Subblocks. Es können 256 Funktionen eingebaut werden. Die eigentlichen Daten sind in Blöcke untergliedert, wobei jeder eine individuelle Länge, gespeichert in der Block Size, haben kann. An den Schluss muss der Block Terminator (ASCII 0h) gesetzt werden. Zusätzliche Erweiterungen Aufbau Abbildung 4/3.3-9: Extension-Blöcke

Teil 4/3.3 Seite 14 Graphic Control Extension Block Transparenz Diese Erweiterung dürfte die bekannteste sein. Sobald eine GIF-Grafik animiert ist oder transparent dargestellt wird, sind die Graphic Control Extension-Blöcke mit von der Partie. Die Definition kann ausschließlich als Local Extension erfolgen, da sich die Effekte immer auf die folgende Einzelgrafik beziehen. Wie in Abbildung 4/3.3-10 zu sehen ist, wird auch dieser Block mit dem Extension Introducer eingeleitet. Der Function Code ist der Graphic Control Label (ASCII F9h) und zeigt an, dass es sich bei der Erweiterung um die Graphic Control Extension handelt. Der folgende Datenblock ist ebenfalls fest definiert. Die Block Size (4) legt vier Datenbytes fest, gefolgt vom Block Terminator. Die entscheidenden Informationen befinden sich im Datenblock (Abbildung 4/3.3-10). Das erste Byte enthält die Flags (Abbildung 4/3.3-11), die die Darstellungsweise der Grafik steuern. Das Transparency Flag gibt an, ob eine Transparenzfarbe vorhanden ist. Ist dieses gesetzt, so ist die entsprechende Farbe im Transparent Color Index angegeben, andernfalls hat dieses Feld keine Bedeutung. Praktisch bedeutet die Anwendung einer Transparenzfarbe, dass das Anzeigeprogramm an Stelle der Farbe den Hintergrund belässt, sodass die Grafik durchscheinend wirkt. Abbildung 4/3.3-10: Inhalt des Datenblocks bei der Graphic Control Extension

Teil 4/3.3 Seite 15 Das Bit User Input Flag soll anzeigen, ob vor dem Weiterschalten der Grafik eine Eingabe des Benutzers vonnöten ist. Praktisch hat dieses Bit keine Bedeutung, da die wenigsten Programme auf dieses Flag reagieren. Die Steuerung der Bildfolgen, die meistens als Animationen ausgelegt sind, erfolgt über das Byte Delay Time. In diesem wird die Zeit bis zur Weiterschaltung der Grafik in hundertstel Sekunden angegeben. Ist hier der Wert 0 eingetragen, wird die Bildfolge angebrochen, das heißt, die aktuelle Grafik bleibt erhalten und alle nachfolgenden werden nicht mehr angezeigt. Interessant ist die Angabe Disposal Method in den Flags. Die vier verschiedenen Methoden bestimmen, was mit der aktuellen Grafik geschehen soll, bevor die nächste bearbeitet wird. Es stehen vier verschiedene Methoden zur Verfügung: Animationen Disposal-Mode Flag Methode Beschreibung 0 Keine Aktion Die Grafik wird komplett überschrieben. 1 Keine Löschung Die Grafik bleibt erhalten. 2 Füllen mit Hintergrundfarbe 3 Hintergrund wiederherstellen Die gesamte Fläche wird mit der Hintergrundfarbe gefüllt. Der Hintergrund, der vor dem Aufbau der Grafik dargestellt war, wird wiederhergestellt. 4-7 Diese Aktionen sind noch frei für Erweiterungen. Bei geschickter Anwendung der Methoden kann der benötigte Speicherplatz einer GIF-Animation drastisch verringert werden. So ist es möglich, nur die sich verändernden Bildbereiche zu löschen und mit der nachfolgenden Grafik zu überschreiben. Mit den Angaben Top Border und Left Border im Image Descriptor ist es möglich, die neue Grafik genau im virtuellen Anzeigebereich zu positionieren. Lässt man nun die vorhergehende Grafik auf dem Bildschirm stehen, kann der neue Ausschnitt darüber gelegt werden. Der Speicherplatz für die restlichen Bilddaten ist gespart worden. Top und LeftBorder

Teil 4/3.3 Seite 16 Abbildung 4/3.3-11: Flags im Datenblock Comment Extension Kommentare Informationen, die nichts mit der direkten Bearbeitung und Darstellung der zu tun haben, werden im Comment Extension Block gespeichert. Dies können beispielsweise Copyright-Vermerke, Kommentare oder Hinweise zur verwendeten Software sein. Dieser Block darf nicht für eigene Erweiterungen verwendet werden, da er von den meisten Programmen ignoriert und von vielen Bildbearbeitungsprogrammen sogar gelöscht wird. Im Sinne einer möglichst kleinen GIF-Datei sollte man auf diesen Block ohnehin verzichten. Der Aufbau folgt dem allgemeinen Extension Block. Der Function Code ist der Comment Label (ASCII FEh). Alle Informationen werden in den Unterblöcken des Datenblocks abgelegt und mit dem Blockterminator abgeschlossen. Eine Bemerkung noch zu den gespeicherten Daten: Es sollen laut Spezifikation nur 7-bit-ASCII-Zeichen verwendet werden (keine Sonderzeichen), die Verwendung von 8-bit-Zeichen ist jedoch möglich. Der Comment Extension Block kann an jeder Stelle in der Datei eingefügt werden.

Teil 4/3.3 Seite 17 Plain Text Extension Auch in diesem Block werden in erster Linie ASCII-Zeichen gespeichert. Allerdings ist hierbei das 7-bit-Format zwingend erforderlich, ebenso wie das Vorhandensein einer globalen Farbtabelle. 7-Bit-ASCII-Text Abbildung 4/3.3-12: Plain Text Extension Block Im Laufe des Anzeigeprozesses wird der Text im Plain Text Extension Block (Abbildung 4/3.3-12) zu einer Grafik umgewandelt, abhängig von den Angaben im Featureblock (Abbildung 4/3.3-13), einem Datenblock mit der festen Block Size 12. Ähnlich dem Image Descriptor sind hier in den Feldern Text Grid Left Border und Text Grid Top Border sowie Text Grid Width und Text Grid Height Position und Größe des Textfeldes innerhalb des virtuellen Anzeigebereichs definiert. In dieses Feld hinein wird der Text als Grafik projiziert, wobei jeder Buchstabe in einer Zelle fester Größe dargestellt wird. Die Maße einer Zelle sind in Character Cell Width und Character Cell Height definiert und müssen jeweils ein Vielfaches der Textfeldbreite bzw. höhe sein. Alle Positionsund Größendefinitionen sind wie immer in Pixel anzugeben. Einfügen von Text in die Grafik

Teil 4/3.3 Seite 18 Zeichensatz Die Wahl des Fonts sowie seiner Attribute bleibt dem anzeigenden Programm überlassen und kann nicht beeinflusst werden. Innerhalb der GIF-Datei wird Plain Text wie eine Grafik behandelt. Das bedeutet, dass mit einem Graphic Control Extension Block die Darstellungsweise mit allen Möglichkeiten beeinflusst werden kann. In den beiden letzten Bytes des Feature Blocks sind die Zeiger in die globale Farbtabelle für die Vorder- bzw. Hintergrundfarbe abgelegt. Abbildung 4/3.3-13: Feature Block Application Extension Zusätzliche Informationen Um Anwendungen wie Bildbearbeitungsprogrammen oder GIF-Animatoren eine Möglichkeit zu geben, eigene Erweiterungen zu den zu speichern, wurde der Application Extension Block (Abbildung 4/3.3-14) definiert. Die jeweilige Anwendung muss sich im Identifier Block (Datenblock mit fester Block Size 11, siehe Abbildung 4/3.3-15) ausweisen. Dies geschieht durch einen 8 Byte großen Identifier, der lesbaren Text enthält und eine Abkürzung der Applikations-

Teil 4/3.3 Seite 19 bezeichnung sein sollte, sowie einen Authentication Code, den die Anwendung mittels eines eigenen Alorithmus erzeugen muss und der möglichst eindeutig sein sollte. Hierbei liegt keine Normierung vor, auch eine zentrale Vergabestelle solcher Codes ist nicht installiert, sodass eine Eindeutigkeit nicht garantiert werden kann. Da aber die Application Extensions ohnehin selten benutzt werden, ist eine Doppelbelegung kaum zu erwarten. Die dem Identifier Block folgenden Datenblöcke können mit den eigenen Daten gefüllt werden. Abbildung 4/3.3-14: Application Extension Block Abbildung 4/3.3-15: Identifier Block Das letzte Byte in einer GIF-Datei ist der Trailer mit dem festen Wert 3Bh. Er dient als Terminator und beendet die Verarbeitung der Datei. Trailer

Teil 4/3.3 Seite 20

Teil 4/3.3.1 Seite 1 Interlaced GIFs 4/3.3.1 Interlaced GIFs Eine GIF-Datei ohne Interlaced-Funktion wird im Browser von oben nach unten in der Geschwindigkeit aufgebaut, in der die Bildinformationen übertragen und decodiert werden. Ein Interlaced GIF wird in verschiedenen Schichten abgelegt. Der Browser startet die Übertragung des Bildes, das Schicht für Schicht dargestellt und immer schärfer wird. So erkennt der Benutzer relativ schnell die Umrisse des Bildes, bevor die ganze Datei auf dem eigenen Rechner liegt. Interlaced GIFs bewähren sich insbesondere bei großen, für die auf der Seite sofort der notwendige Platz reserviert wird. Bildaufbau Um Bilder in Interlaced GIFs zu konvertieren, stehen Ihnen verschiedene Applikationen zur Verfügung. So enthält z. B. die Shareware-Version von PaintShop Pro 4.0 eine Option, mit der man die unterschiedlichsten Bildformate (JPEG, Windows Bitmap, GIF, JPEG, PCX, PPM, TIFF etc.) in Interlaced GIFs konvertieren kann. Zur Konvertierung einer Grafik in das Interlaced-Format führen Sie in PaintShop Pro folgende Schritte aus: Öffnen Sie PaintShop Pro mit einem Doppelklick auf das entsprechende Symbol. Wählen Sie File, Open und markieren Sie im Dialogfeld Open die Datei, die Sie konvertieren möchten. Nach der Auswahl des Bildes wählen Sie File und Save As und selektieren in der Auswahlliste unter Dateityp den Eintrag GIF-CompuServe. Wählen Sie in der Auswahlliste unter Sub-type den Eintrag Version 89a Interlaced aus. Klicken Sie auf OK. Der alte Dateiname wird automatisch übernommen und mit der neuen Dateierweiterung.gif versehen. Konvertierung in Interlaced GIF Damit haben Sie die Datei als Interlaced GIF abgespeichert.

Teil 4/3.3.1 Seite 2 Interlaced GIFs Abbildung 4/3.3.1-1: Konvertierung einer Grafik unter PaintShop Pro in das GIF-Interlaced-Format

Teil 4/3.3.2 Seite 1 Transparente GIFs 4/3.3.2 Transparente GIFs Das neue GIF-Format GIF89a gibt Ihnen die Möglichkeit, eine der Farben innerhalb eines Bildes als transparent zu definieren. Alle anderen Bilder werden im Browser mit einer Hintergrundfarbe dargestellt. Dieser Umstand spielt so lange keine Rolle, wie alle angezeigten rechteckig sind. Wenn Sie Ihre Bilder allerdings ein wenig aufwerten möchten, macht es sich immer gut, die Darstellungen übergangslos mit dem Hintergrund verschmelzen zu lassen. Eine Farbe als transparent Abbildung 4/3.3.2-1: Wenn Sie mit transparenten GIFs arbeiten, sieht Ihr Bereich sehr viel professioneller aus Genau wie bei den Interlaced GIFs gibt es auch bei den transparenten GIFs einige Werkzeuge, die Ihnen bei der Formatumsetzung behilflich sind. Wenn Sie mit PaintShop Pro arbeiten, müssen Sie für die Konvertierung die folgenden Schritte ausführen. Werkzeuge

Teil 4/3.3.2 Seite 2 Transparente GIFs Konvertierung in transparente GIFs Öffnen Sie PaintShop Pro mit einem Doppelklick auf das entsprechende Symbol. Wählen Sie File und Open und markieren Sie im Dialogfeld Open die gewünschte Bilddatei. Klicken Sie auf OK. Damit Sie das Bild als GIF abspeichern können, muss es eine Farbpalette besitzen. Durch die Konvertierung in PaintShop Pro wird die Farbtiefe auf maximal 256 Farben reduziert. Klicken Sie in der Menüleiste auf den Eintrag Colors und wählen Sie aus dem angezeigten Menü den Punkt Decrease Color Depth aus. Im angezeigten Untermenü wählen Sie den Eintrag 256 Colors oder eine geringere Farbtiefe aus. Abbildung 4/3.3.2-2: Um ein transparentes GIF zu erhalten, wird als erstes die Farbpalette konvertiert Erst jetzt können Sie dazu übergehen, die transparente Farbe auszuwählen. Dazu klicken Sie in der Werkzeugleiste das Symbol für das Eyedropper-Tool (die Pipette).

Teil 4/3.3.2 Seite 3 Transparente GIFs Wählen Sie mit einem Klick auf die betreffende Farbe innerhalb des Bildes die transparente Farbe aus. Die selektierte Farbe wird auch in der Farbpalette hervorgehoben. Wählen Sie im File-Menü den Punkt Save As aus. Sie erhalten das Dialogfeld Save As angezeigt. Nach der Angabe des Dateinamens wählen Sie unter Dateityp aus der angezeigten Auswahlliste den Eintrag GIF- CompuServe aus. Als Sub-type selektieren Sie Version 89a interlaced. Mit einem Klick auf die Schaltfläche Options öffnen Sie das Dialogfeld File Preferences. Klicken Sie auf das Optionsfeld Set the transparency value to palette entry. Falls die transparente Farbe der Hintergrundfarbe der Grafik entsprechen soll, können Sie die oben beschriebenen Schritte für die Auswahl der transparenten Farbe auslassen und einfach die Option Set the transparency value to the backround color wählen. Abbildung 4/3.3.2-3: Das Dialogfeld File Preferences Klicken Sie auf OK und im Dialogfeld Save As auf Schließen.

Teil 4/3.3.2 Seite 4 Transparente GIFs

Teil 4/3.4 Seite 1 JPEG 4/3.4 JPEG Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das auf dem Komprimierungsalgorithmus DCT (Discrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Da dieses Verfahren zunächst nur für statische von Bedeutung war, entstand das gleichnamige Dateiformat für Bilder. Mittlerweile wird der JPEG-Algorithmus auch bei Videos eingesetzt und hat das zukunftsweisende Videoformat MPEG (Motion JPEG) hervorgebracht. Das JPEG-Grafikformat komprimiert ebenfalls sehr gut und hat gegenüber dem GIF-Format den Vorteil, dass es Bilder mit bis zu 16,7 Millionen Farben speichern kann. Diese Farbanzahl bedeutet je 256 Rot-, Grün und Blauabstufungen und entspricht in etwa der maximalen Farbauflösung des Auges. Der Nachteil ist, dass JPEG mit Verlust komprimiert, d. h. je höher der Komprimierungsfaktor ist, desto niedriger ist die Qualität der Grafik. Auf Grund seiner Charakteristik eignet sich das JPEG-Format vor allem zum WWW-gerechten Speichern von eingescannten Fotos, aber auch für andere, in denen sehr feine Farbverläufe oder sehr viele Farben vorkommen. Beim JPEG-Format können Sie in besseren Grafikprogrammen zwei Parameter selbst bestimmen: Die DPI-Dichte (Punktdichte, dpi = dots per inch): Bei JPEG-Dateien, die Sie für die Anzeige in WWW-Seiten benötigen, reicht ein Wert zwischen 70 und 100 dpi. Den Komprimierungsfaktor: Je höher der Komprimierungsfaktor, desto schlechter die Bildqualität. Ein Komprimierungsfaktor von 5 bis 10 ist für eine hohe Bildqualität ein sinnvoller Wert. Discrete Cosinus Transformation Vor- und Nachteile des JPEG-Formats Parameter für das JPEG-Format

Teil 4/3.4 Seite 2 JPEG Progressive JPEGs Neben dem Standard-JPEG-Format gibt eine weitere Variante der JPEG-: progressive JPEG-. Dabei wird, ähnlich wie beim Interlaced GIF-Format, zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15 % der Grafikdatei an den aufrufenden WWW-Browser übertragen wurden.

Teil 4/3.5 Seite 1 PNG 4/3.5 PNG PNG bedeutet Portable Network Graphic (ausgesprochen PING). Es handelt sich um ein Grafikformat, das eigens für den Einsatz im WWW konzipiert wurde. PNG soll alle Vorteile von GIF und JPEG in sich vereinen: Portable Network Graphic PNG komprimiert verlustfrei wie das GIF-Format. PNG unterstützt 16,7 Mio. Farben wie das JPEG-Format. PNG ist wie GIF und JPEG plattformunabhängig. PNG unterstützt transparente Hintergrundfarben wie das GIF-Format. PNG erlaubt das Abspeichern zusätzlicher Information in der Grafikdatei, z. B. Autor- und Copyright-Hinweise.

Teil 4/3.5 Seite 2 PNG