Grafiken (I): Dateiformate und Farbenlehre

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, die auf WWW-Seiten sehr reizvolle Effekte erzielen können.

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.

• 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

 Seitenanfang

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.

 Seitenanfang

• 2 Farben (schwarz/weiß)
• 16 Farben
• 256 Farben
• 16,7 Mio. Farben

• Das RGB-Modell: Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema z.B. die Farbwerte 0,0,153. (0 rot, 0 grün, 153 blau). Mit diesem Schema können bis zu 16,7 Mio. unterschiedliche Farben definiert werden.

  

• Das HSB-Modell: Auch bei diesem Modell gibt es drei definierende Zahlenwerte. H steht für Hue (Farbton), S für Saturation (Sättigung), und B für Brightness (Helligkeit). Farbtöne können Werte zwischen 0 und 359 annehmen, Sättigung und Helligkeit Werte zwischen 0 und 255. Auf diese Weise lassen sich fast 23,6 Mio. Farben definieren.

  

In HTML werden die 256 möglichen Werte für RGB-Werte in Hexadezimalform (0 bis FF) notiert. Mehr hierzu im Kapitel  Farben definieren in HTML.

Farbpaletten

Theoretisch kann jede der 256 Farben beliebige RGB-Werte haben, d.h. es sind auch "krumme" Farbwerte wie 71,217,34 denkbar. Für WWW-gerechte GIF-Grafiken sollten Sie sich jedoch an ein Schema halten, das auch von Netscape optimal interpretiert wird. Bei diesem Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 dividierbar sind. R(ot), G(rün) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 haben. Ein erlaubter Wert ist danach z.B. 153,102,0. Auf diese Weise ergeben sich 6 x 6 x 6 mögliche Farben, also 216. Diese "optimale" Farbpalette sieht so aus:

Die verbleibenden 40 Farben können Sie als "eiserne Reserve" betrachten. Wenn Sie für einzelne Grafiken bestimmte, fehlende Farbtöne brauchen, können Sie unbenutzte Farben der Palette mit der gewünschten Farbe definieren.

In HTML werden die 256 möglichen Werte für RGB-Werte in Hexadezimalform (0 bis FF) notiert. Mehr hierzu im Kapitel  Farben definieren in HTML.

 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
JavaScript-Referenz: Objekte, Eigenschaften, Methoden  |  Grafiken (II): Grafiktypen und ihr richtiger Einsatz

© 1996  Stefan Münz