4/3 Grafiken - dadanini.at

Grafiken
Teil 4/3.1 Seite 1
Grafikprogramme
4/3
Grafiken
Die Dokumente im World Wide Web profitieren von den grafischen Elementen, obwohl komplexere Grafiken 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 Grafiken
Sie erfahren,
• aus welchen Quellen Sie die Grafiken 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 Grafiken 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
Grafiken
Grafikprogramme
Rastergrafiken
In den Rastergrafiken sind Informationen abgespeichert, wo
und in welcher Farbe ein bestimmter Bildpunkt (Pixel) am
Bildschirm angezeigt wird. Diese Grafiken eignen sich hervorragend für die Repräsentation von Fotos und Bildern.
Grafikprogramme
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
Optimiertes Profi-Grafikprogramm für Web-Publishing
http://www.adobe.com/prodindex/
photoshop/main.html
Auto Sketch
Vektororientiertes ProfiGrafikprogramm
http://www.autodesk.com/products/
autocad/asketch/autosket.htm
MGI-Grafiksoftware
Photo-Suite, Calamus
DTP-Programm usw.
http://www.mgisoft.com/Products/
Corel
Professionelle Suite aus
Grafikprogrammen für verschiedene Aufgaben
http://www.corel.com/products/
graphicsandpublishing/
Fractal Design
Grafiksoftware für Painting,
Rendering und Spezialeffekte
http://www.fractal.com/products/
GIF
Construction
Programm für die Erstellung animierter GIFGrafiken
http://www.mindworkshop.com/
alchemy/gifcon.html
Graphics
Workshop
Pixel-Programm mit vielen
nützlichen Leistungsmerkmalen
http://www.mindworkshop.com/
alchemy/gww.html
Kinetix
Spezialsoftware für
Morphing, Animation usw.
http://www.ktx.com/
PaintShop Pro
Umfangreiches und sehr
gutes SharewareBildbearbeitungsprogramm
http://www.jasc.com/
Tabelle 4/3.1-1: Grafikprogramme für Windows 3.x/95/NT.
Grafiken
Teil 4/3.1 Seite 3
Grafikprogramme
Name
Beschreibung
Info/Download-Adresse
Adobe
Photoshop
Für Web-Publishing optimiertes
Profi-Grafikprogramm
http://www.adobe.com/prodindex/
photoshop/main.html
Corel
Professionelle Suite aus Grafikprogrammen für verschiedene Aufgaben
http://www.corel.com/products/
graphicsandpublishing/
Fractal
Design
Grafiksoftware für Painting,
Rendering und Spezialeffekte
http://www.fractal.com/products/
Tabelle 4/3.1-2: Grafikprogramme für Macintosh
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
Für Web-Publishing optimiertes
Profi-Grafikprogramm
http://www.adobe.com/prodindex/
photoshop/main.html
Corel
Professionelle Suite aus Grafikprogrammen für verschiedene
Aufgaben
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
Grafiken
Grafiken
Teil 4/3.2 Seite 1
Einsatz bestehender Bilder
4/3.2
Einsatz bestehender Bilder
In vielen Fällen sind die Grafiken 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.
Scanner
• Neben diesem traditionellen Verfahren gibt es die Möglichkeit, Bilder und Grafiken 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.
Kodak-Foto-CD
• 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.
Digitale Kameras
• 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.
Cliparts
Teil 4/3.2 Seite 2
Grafiken
Einsatz bestehender Bilder
Web-Bereich
Info/Download-Adresse
Backgrounds
http://home.netscape.com/assist/net_sites/bg/
backgrounds.html
Texture Land
http://www.meat.com/textures/
Caboodles
http://www.caboodles.com/
ClipartCom
http://www.clipart.com/
Barry’s Clipart Server
http://www.barrysclipart.com/
FreeArt Cliparts
http://www.mccannas.com/free/freeart.htm
Cliparts als ZIP-Pakete
(FTP-Verzeichnis)
ftp://ftp.uni-stuttgart.de/pub/systems/acorn/riscos/
graphics/pictures/
Free Web Page Graphics
http://www.onebellevue.com/graphics/index.html
Tabelle 4/3.2-1: Download-Adressen für Cliparts
Grafiken
Teil 4/3.3 Seite 1
Das GIF-Format
4/3.3
Das GIF-Format
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 Grafiken in einem möglichst speicherplatzschonenden Format abgelegt werden. Eine GIF-Datei besitzt eine
maximale Farbtiefe von 256 Farben. GIF-Dateien werden
gerne als eingebettete Grafiken eingesetzt, da die meisten
Browser dieses Bildformat unterstützen und (fast) nur bei
diesem Verfahren transparente Hintergründe einsetzbar sind.
Das GIF-Format eignet sich vor allem für
•
•
•
•
Schwarzweißbilder und Texte,
Bilder mit einer begrenzten Anzahl von Farben,
Grafiken mit scharfen Konturen – z. B. Menüs, Schaltflächen etc. – und
Grafiken, 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 Grafiken in einer einzigen Grafikdatei gespeichert und beim Aufruf über bestimmte Optionen
gesteuert. Über diese Funktionalität lassen sich animierte
Grafiken 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“.
CompuServe
Teil 4/3.3 Seite 2
Grafiken
Das GIF-Format
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
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 ComputerGenerationen) 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
Grafiken mit verschiedenen Farbtabellen, wie er bei GIFDateien vorkommen kann, vermieden.
Versionen
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.
Grafiken
Teil 4/3.3 Seite 3
Das GIF-Format
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 Grafiken 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
Grafiken
Das GIF-Format
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.
Grafiken
Teil 4/3.3 Seite 5
Das GIF-Format
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.
ColorFlags
Die ersten drei Bit (Size of Global Color Table) der Color
Flags geben die Größe der globalen Farbtabelle im 2erKomplement an, wobei der angegebene Wert um eins erhöht
werden muss.
Größe der
Farbtabelle
Teil 4/3.3 Seite 6
Grafiken
Das GIF-Format
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.
Grafiken
Teil 4/3.3 Seite 7
Das GIF-Format
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.
Originalpalette
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:
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 Grafiken, 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
Grafiken
Das GIF-Format
Image Descriptor
Lage und Größe
der Grafik
Die einzelnen in einer GIF-Datei gespeicherten Grafiken
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).
Grafiken
Teil 4/3.3 Seite 9
Das GIF-Format
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.
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
InterlaceFlag
Teil 4/3.3 Seite 10
Grafiken
Das GIF-Format
langsam sein können, entwickelt. Durch die InterlaceMethode 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.
Grafiken
Teil 4/3.3 Seite 11
Das GIF-Format
Image Data Table
Die eigentlichen Grafikdaten werden im Image Data Table
festgehalten. Die einzelnen Bytes sind Zeiger in die derzeit
aktuelle Farbtabelle.
Grafikdaten
Zur Speicherung wird dabei eine erweiterte Form der LZWKompression, 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.
LZW-Kompression
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.
Erweiterung des
LZW-Algorithmus
Teil 4/3.3 Seite 12
Grafiken
Das GIF-Format
Abbildung 4/3.3-8: Image Data Table
ImageDataTable
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.
Einteilung
in Blöcke
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.
Grafiken
Teil 4/3.3 Seite 13
Das GIF-Format
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.
Zusätzliche
Erweiterungen
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.
Aufbau
Abbildung 4/3.3-9: Extension-Blöcke
Teil 4/3.3 Seite 14
Grafiken
Das GIF-Format
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
Grafiken
Teil 4/3.3 Seite 15
Das GIF-Format
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 Grafiken werden nicht
mehr angezeigt.
Animationen
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:
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
Die gesamte Fläche wird mit der Hintergrundfarbe
gefüllt.
3
Hintergrund
wiederherstellen
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
Grafiken
Das GIF-Format
Abbildung 4/3.3-11: Flags im Datenblock
Comment Extension
Kommentare
Informationen, die nichts mit der direkten Bearbeitung und
Darstellung der Grafiken 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.
Grafiken
Teil 4/3.3 Seite 17
Das GIF-Format
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
Grafiken
Das GIF-Format
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 Grafiken 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-
Grafiken
Teil 4/3.3 Seite 19
Das GIF-Format
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
Das GIF-Format
Grafiken
Grafiken
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 Grafiken, 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.
Damit haben Sie die Datei als Interlaced GIF abgespeichert.
Konvertierung
in Interlaced GIF
Teil 4/3.3.1 Seite 2
Grafiken
Interlaced GIFs
Abbildung 4/3.3.1-1: Konvertierung einer Grafik unter
PaintShop Pro in das GIF-Interlaced-Format
Grafiken
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 Grafiken 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
Grafiken
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).
Grafiken
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 GIFCompuServe 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
Grafiken
Grafiken
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 Grafiken
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.
Discrete Cosinus
Transformation
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 Grafiken, in denen sehr feine Farbverläufe oder sehr viele Farben
vorkommen.
Vor- und Nachteile
des JPEG-Formats
Beim JPEG-Format können Sie in besseren Grafikprogrammen zwei Parameter selbst bestimmen:
Parameter für
das JPEG-Format
• 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.
Teil 4/3.4 Seite 2
Grafiken
JPEG
Progressive JPEGs
Neben dem Standard-JPEG-Format gibt eine weitere Variante
der JPEG-Grafiken: „progressive JPEG-Grafiken“. 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.
Grafiken
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:
•
•
•
•
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.
Portable
Network Graphic
Teil 4/3.5 Seite 2
PNG
Grafiken