StarHTML Weiteres Webgrafik

Webgrafik

PNG - Vorteile von GIF und JPEG  Hintergrundwissen: Farbtiefe, -palette und Dithering  Hintergrundwissen: Bildformate  Hintergrundwissen: Vektorgrafik  Grafik-Programme  Grafische Mittel  Typische Grafikarten

PNG - Vorteile von GIF und JPEG

PNG bedeutet Portable Network Graphic (ausgesprochen: PING). Es ist ein Grafikformat, das eigens für den Einsatz im Internet konzipiert wurde. PNG soll alle Vorteile von GIF und JPEG in sich vereinen:

• PNG komprimiert verlustfrei wie das GIF-Format.
• PNG unterstützt bis zu 16,7 Mio. Farben wie das JPEG-Format.
• PNG unterstützt transparente Hintergrundfarben wie das GIF-Format.
• PNG ermöglicht außerdem das Abspeichern zusätzlicher Information in der Grafikdatei, z.B. Autor- und Copyrighthinweise.

Viele sehr moderne Webgrafik-Programme speichern bereits standardmäßig in PNG.
Aber: Netscape Navigator und Internet Explorer unterstützen dieses Format jeweils erst ab Version 4.

Hintergrundwissen: Farbtiefe, -paletten und Dithering

• 4 Bit: 16 Farben (z.B. die 16 Grundfarben)
• 8 Bit: 256 Farben (wie beim GIF-Format)
• 16 Bit: 65536 Farben (häufigste Farbtiefe bei Computer-Monitoren)
• 24 Bit: 16,7 Millionen Farben = Truecolor (engl. Echtfarben; wie beim JPEG-Format)

Für Dateien im GIF-Format können Sie pro GIF-Datei aus den 16,7 Mio. möglichen Farben maximal 256 Farben "aussuchen" und abspeichern. Bei einer solchen Farbauswahl spricht man von einer Farbpalette.

Jede der 256 Farben kann beliebige RGB-Werte (Rot, Grün, Blau) haben. Bei Webgrafiken sollten Sie sich jedoch an ein Standard-Schema halten. Bei diesem Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 teilbar sind. Rot, Grün und Blau sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 haben. Diese entsprechen den Hexadezimalzahlen 00, 33, 66, 99, CC und FF. Dadurch ergeben sich 6 x 6 x 6 = 216 mögliche Farben (siehe auch die 216 Standardfarben). Die verbleibenden 40 Farben können Sie mit noch fehlenden Farbtönen auffüllen.

Sie können sich auch auf Grafiken beschränken, die lediglich 16 Farben enthalten. Auch dabei gilt: theoretisch kann jede der 16 Farben einer solchen Farbpalette beliebige Farbwerte haben. Es gibt jedoch 16 Farben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können. In Windows sind das deshalb auch die 16 Grundfarben. Bei einer Beschränkung auf 16 Farben ist es daher sinnvoll, mit diesen 16 Grundfarben zu arbeiten. Siehe auch Die 16 Grundfarben.

Um beschränkte Farbpaletten auszugleichen, gibt es in sehr modernen Bildbearbeitungs-Programmen die Option des Ditherings, kurz Dither. Dabei werden fehlende Farbtöne sehr harmonisch aus vorhandenen gemischt, das menschliche Auge interpretiert dieses "Gekräusel" als einzelnen Farbton. Dadurch kann einiger Speicherplatz gespart werden.

256 Farben mit Dither	32 Farben ohne Dither	32 Farben mit Dither
9 kB	4 kB	5 kB

Hintergrundwissen: Bildformate

GIF, 128 Farben	GIF, 32 Farben, Dither	PNG, 16 Mio. Farben
16 kB	14 kB	52 kB
JPEG, Kompr.faktor 80%	JPEG, Kompr.faktor 40%	PNG, 32 Farben, Dither
8 kB	4 kB	12 kB

Hinweis: Aus Platzgründen ist das obere als PNG-Grafik gekennzeichnete Bild im JPEG-Formate (mit Kompressionsfaktor 0) gespeichert, da es in diesem Formate nur 27 kB groß ist, bei gleicher Qualität. Es lohnt sich also gar nicht, PNG-Bilder mit 16 Millionen Farben zu speichern. Wenn bei Ihnen in der letzten Spalte unten kein Bild angezeigt wird, kennt Ihr Browser das PNG-Format nicht. Dieses wird erst ab den 4er-Versionen der verbreiteten Browser (NN und IE) erkannt.

Es ist gut zu erkennen, welche charakteristischen Merkmale die verwendeten Formate und Einstellungen haben:
Das GIF-Formate hat eine beschränkte Farbtiefe, was sich im ersten Bild (ohne Dither) bemerkbar macht. Die JPEG-Komprimierung hingegen komprimiert nicht verlustfrei, was besonders beim Kompressionsfaktor 40% sehr auffällt.
PNG unterstützt entweder 256 oder 16 Mio Farben. Beim PNG-Bild mit 16 Mio. Farben fällt die Datei-Größe auf, es ist dafür aber auch das beste der 6 Beispielbilder, da es verlustfrei komprimiert ist. Bei 256 Farben fallen, wie bei GIF, die fehlenden Farben unangenehm auf.

Hintergrundwissen: Vektorgrafik

Für Webgrafik sind vektororientierte Programme meist unerlässlich. Gute Vektorprogramme bieten eine Fülle von Möglichkeiten an, Grafikobjekte zu manipulieren, z.B. mit 3D-Effekten, Farbverläufen oder "wehenden Schatten". Das ist in Pixelgrafik nur schwer realisierbar. Um diese Grafiken in die Internet-üblichen Formate GIF oder JPEG zu konvertieren, müssen Sie die Export-Funktionen des Vektor-Programms nutzen. Teilweise ist es aber einfacher und effizienter die erstellte Grafik aus dem Vektorprogramm abzufotografieren, in die Bildbearbeitung zu übernehmen und dort zu speichern.

Grafik-Programme

Paint Shop Pro (kurz: PSP) zählt noch zu den billigen Varianten, die aktuelle Version 6 kostet meist um 300 DM. Sie können das Programm aber in der deutschen Testversion 60 Tage lang kostenlos benutzen. Die Testversion bekommen Sie entweder direkt beim Hersteller Jasc oder auf zahlreichen Heft-CDs größerer Computermagazine.
PSP bietet eine breite Palette von einfachen Zeichenwerkzeugen (Pinsel, Radiergummi, Farbtopf, Auswahl, Farbauswahl, Sprühdose ...) bis zu professionellen Effekten und Funktionen.
Wenn Sie ein Bild zum Barbeiten laden möchten, haben Sie die Auswahl zwischen Neues Bild, Bild Öffnen, Bild-Browser, Bildschirm-Foto und Einscannen. Es bietet eine gute Farbauswahl-Funktion, bei der Sie sogar einen Hexadezimalcode angeben können. Anschließend können Sie entweder neue Objekte (Rechtecke, Elipsen, Striche) oder auch Text einfügen. Sie können im vorhandenen Bild Objekte oder Farbbereiche auswählen und ihnen Eigenschaften wie Schatten oder Tasten geben, sowie mit Effekten Bilder verbessern oder verfremden. Beim Speichern unterstützt PSP alle gängigen Formate, die Optimierung zu Webgrafiken ist aber nicht so einfach.

Macromedia Fireworks stellt die Zwischenstufe zur Profi-Liga der Bildbearbeitungsprogramme dar und beeindruckt mit komplexen Webdesign-Funktionen. Es kostet (in der aktuellen Version 2) meist um die 500 DM. Auch davon gibt es eine (allerdings englische) Testversion, die Sie 30 Tage lang voll nutzen dürfen. Herunterladen können Sie diese Testversion beim Hersteller Macromedia.
Fireworks bietet Pixel- und Vektor-Grafik-Funktionen. Für Web-Grafik sind in diesem Programm die Vektor-Funktionen wichtiger, da nur diese komplexe Designmöglichkeiten bieten.
Sie können jedem beliebigen markierten Objekt in Fireworks Eigenschaften wie Rand, Füllung, Effekte und Deckfähigkeit zuweisen. Es gibt zahlreiche vorgefertigte "Styles" für Schrifteffekte und Hervorhebungen. Auch bietet es sehr umfangreiche Foto-Filter.
Standardmäßig speichert Fireworks im neuen PNG-Format, die Exportfunktion bietet platzsparendes Speichern in GIF und JPEG, mit allen Einstellungs- und sehr umfangreichen Vorschaufunktionen.

CorelDraw ist einerseits das verbreitetste Vektor-Grafikprogramm, andererseits aber ein komplettes Grafik-Paket mit Fotobearbeitung und 3D-Grafik. Insgesamt ist es auch für Web-Grafik sehr nützlich. Es wird in der aktuellen Version 9 mit vielen Cliparts und Schriftarten für ca. 1000 DM geliefert. Eine Testversion gibt es bei Corel.

Gafische Mittel

Eigenschaft	Zweck
Deckfähigkeit	Normalerweise beträgt die Deckfähigkeit eines Objektes 100%. Wird Sie aber herabgesetzt, lassen sich dahinter liegende Objekte erkennen.
Füllung	Die Füllung ist entweder eine Farbe, ein Farbverlauf oder ein Muster. Farbverläufe eignen sich sehr für Schriften, Muster für geometrische Formen.
Schatten	Schatten suggerieren einen Abstand zwischen dem Hintergrund und dem Objekt. Schatten werden meist rechts unter dem Objekt angezeigt und müssen nicht unbedingt schwarz sein.
Plastischer Effekt	Auch plastische Effekte hinterlassen Eindruck. Besonders bei Schriftzügen sind sie sehr reizvoll.
Unschärfe	Mit unscharfen Bildteilen lässt sich eine Entfernung oder Bewegung im Bild vortäuschen. Bei animierten GIFs sehr empfehlenswert um Einzelbilder zu sparen.

Typische Grafikarten

Weitere Tips zu Webgrafik: Grafik-Kurs