| HTML-Dateien selbst erstellen
|  | Grundwissen Grafik

# WWW-gerechte Grafiken

Grafikformate im WWW
Pixel und Vektoren

## Grafikformate im WWW

Im WWW haben sich zwei Dateiformate für Grafiken durchgesetzt, die von allen modernen Browsern "inline", also im eigenen Fenster angezeigt werden können: die Formate GIF und JPEG. Bei beiden Formaten handelt es sich um pixelorientierte Formate. Die Stärken beider Formate liegen jedoch auf unterschiedlichen Gebieten. Dazu kommt ein neues, vielversprechendes Format, das noch in der Entwicklung ist, aber die Vorteile von GIF und JPEG in sich vereint: das PNG-Format.

### Das GIF-Format

Das GIF-Format gilt als das "Haus-"Format von CompuServe und wurde speziell für den Online-Einsatz entwickelt. Es zeichnet sich durch eine hohe Komprimierungsdichte aus (zum Vergleich: Bitmap-Dateien im BMP-Format sind bei gleichem Inhalt durchschnittlich zehnmal bis dreißig mal so umfangreich wie GIF-Dateien).

Der jetzt gültige Standard des GIF-Formats ist das sogenannte "89er-Format". Dieses Format bietet drei Möglichkeiten an, die das GIF-Format für den Einsatz im WWW besonders interessant machen:

- Die Möglichkeit, eine Datei "interlaced" abzuspeichern. Eine Grafik, die so abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Gerade bei der Online-übertragung ist das sehr hilfreich. Denn so erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Einlesevorgang wird die Grafik dann immer deutlicher und feiner aufgelöst am Bildschirm angezeigt.
- Die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur Steuerung der Einzelgrafiken. Mit Hilfe dieses Features des GIF-Formats sind animierte Grafiken realisierbar.
- Die Möglichkeit, eine Farbe, die in der Grafik vorkommt, als "transparent" zu definieren. Mit Hilfe dieses Features lassen sich transparente Hintergründe bei Grafiken definieren, wodurch Sie auf WWW-Seiten sehr reizvolle Effekte erzielen können.

Ein Nachteil des GIF-Formats ist, daß es maximal 256 Farben pro Datei speichern kann. Ein Pluspunkt ist dagegen, daß GIF-Grafiken verlustfrei komprimieren. Aufgrund seiner Charakteristik ist das GIF-Format für hochauflösende Grafiken wie Fotos oder fein strukturierte Wallpaper-Hintergründe nicht so sehr geeignet. Ideal ist das GIF-Format für Buttons, Dots, Bars, Symbole und Cliparts.

### Das JPEG-Format

Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das auf dem Komprimierungsalgorithmus DCT (Diskrete 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 auf Videos angewendet und hat das zukunftsweisende Video-Format MPEG hervorgebracht.

Das JPEG-Grafikformat komprimiert ebenfalls sehr gut und hat gegenüber dem GIF-Format den Vorteil, daß es pro Bild bis zu 16,7 Millionen Farben speichern kann. Der Nachteil ist, daß JPEG mit Verlust komprimiert, d.h. je höher der Komprimierfaktor, desto schlechter die Qualität der Grafik. Aufgrund seiner Charakteristik eignet sich das JPEG-Format vor allem zum WWW-gerechten Abspeichern von eingescannten Fotos, aber auch für andere Grafiken, in denen sehr feine Farbverläufe vorkommen.

Beim JPEG-Format können Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen:

- Die DPI-Dichte: Das ist die 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 Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein Komprimierungsfaktor von 5 bis 10 ist für eine gute Bildqualität ein sinnvoller Wert.

Es gibt eine Variante von JPEG-Grafiken, sogenannte "progressive JPEG-Grafiken". Dabei wird, ähnlich wie beim GIF-Format in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden WWW-Browser übertragen wurden.
Netscape kann in neueren Versionen progressive JPEG-Dateien korrekt anzeigen. Infos im WWW gibt es zum Beispiel unter Progressive Jpeg .

### Das PNG-Format

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 Copyrighthinweise

Im WWW finden Sie die PNG Specification .

## Pixel und Vektoren

Die beiden Standard-Formate für Grafiken im WWW, GIF und JPEG, sind beide pixelorientiert. Um ansprechende Grafiken zu erzeugen, ist es jedoch in vielen Fällen besser oder sogar unerläßlich, ein vektororientiertes Grafikprogramm, z.B. Corel Draw, zu benutzen. Solche Programme haben den Vorteil, daß man damit grafische Objekte, z.B. Rechtecke, Kreise, Polygone oder Schriftzüge erstellen und objektorientiert manipulieren kann. Gute Vektorprogramme bieten eine Fülle von Möglichkeiten an, Grafikobjekte zu manipulieren, z.B. mit 3D-Effekten, Farbverläufen oder "wehenden Schatten" zu versehen.

Wenn Sie professionelle WWW-Grafiken selbst erstellen wollen, brauchen Sie unbedingt ein solches Vektorprogramm. In der Windows-Welt ist Corel Draw hierbei das führende Produkt, unter Macintosh ist z.B. Adobe Illustrator eine gute Wahl. Solche Produkte sind in der Regel Profi-Ware und kosten mehrere hundert, manchmal auch weit über tausend Mark.

Um die Grafiken, die Sie mit einem solchen Programm erstellen, in eines der WWW-Formate GIF oder JPEG zu bekommen, können Sie den Weg der Konvertierung wählen. Noch einfacher und effizienter aber ist es, ein Programm zu haben, mit dem man einzelne Bildschirmausschnitte anderer geöffneter Programme "einfangen" und abfotografieren kann, um sie dann in einem der beiden WWW-Formate abzuspeichern. Unter MS-Windows ist hierfür Paintshop Pro, ein Shareware-Programm mit Profiqualitäten, das ideale Werkzeug.

Viele Shareware-Programme und Demos für die Grafikerstellung und Grafikbearbeitung können Sie im WWW downloaden. Näheres hierzu im Abschnitt Grafikprogramme.

| Blättern: |
Dynamische grafische Buttons |  |  | Farbpaletten und Farbtiefen

| HTML-Dateien selbst erstellen
|  | Grundwissen Grafik