StarHTML Weiteres Webgrafik

Webgrafik


PNG - Vorteile von GIF und JPEG


Wie bereits unter GIF/JPEG im Vergleich beschrieben, wird das Internet derzeit durch die beiden Grafikformate GIF und JPEG beherrscht. Es sind zwar inzwischen bessere Formate entwickelt worden, die (teilweise durch Vektorgrafik) besser und mit geringerem Verlust komprimieren, diese können sich allerdings nur schwer durchsetzen. Sehr verbreitet ist jetzt schon das PNG-Format.

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.
Aber: PNG bietet keine Möglichkeit zur Animation wie das GIF-Format.

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


Bei Grafikdateien spielt die Farbtiefe eine große Rolle. Sie gibt an, wieviel verschiedene Farben in einer Datei gespeichert werden können. Aufgrund der Speicherstruktur der Computer (Bits und Bytes) gibt es folgende typische Farbtiefen:

  • 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)
Nicht jeder Betrachter bekommt die maximal möglichen 16,7 Mio. Farben zu sehen, hardwareabhängig gab es bis vor wenigen Jahren bei Monitoren Farbtiefen von 256 oder sogar nur 16 Farben. Weitere Farben werden dann (nur schlecht) zusammengemischt. Heute stellen die meisten Monitore mindestens 65536 Farben dar.

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


Hier sehen Sie einen direkten Vergleich eines Bildes in den Formaten GIF/JPEG/PNG mit verschiedenen Farbeinstellungen:

GIF, 128 Farben GIF, 32 Farben, Dither PNG, 16 Mio. Farben
16 kB14 kB52 kB
JPEG, Kompr.faktor 80% JPEG, Kompr.faktor 40% PNG, 32 Farben, Dither
8 kB4 kB12 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


Die beiden Webgrafik-Formate GIF und JPEG sind pixelorientiert, d.h. die Bilder setzen sich aus tausenden Pixeln (Bildpunkten) zusammen. Vektorgrafiken dagegen bestehen aus Objekten wie z.B. Rechtecken, Kreisen, Polygone und Schriftzüge, die bestimmte Eigenschaften aufweisen. Bei einem Rechteck muss nicht, wie bei einem Pixelbild, jeder einzelne Punkt der Fläche mit seiner Farbe gespeichert werden, sondern es werden nur die Ecken und die Farbe des gesamten Rechtecks festgelegt. Dadurch kann sehr viel Speicherplatz gespart werden.

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


Der Markt der Grafik-Programme ist heiß umstritten. Immer mehr Programme zeichnen sich durch "Web-Funktionalität" aus. Die Palette reicht von kostenlosen Programmen bis zu Profi-Paketen, die schon allein wegen ihres hohen Preises hier nicht beschrieben werden können.

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


Web-Grafiken setzen sich stets aus Objekten zusammen. Diesen Objekten können Sie Eigenschaften zuweisen. Welchen Zweck diese Eigenschaften im Webdesign erfüllen, steht hier:

EigenschaftZweck
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


ArtenBeschreibung
Hintergrundbilder
(Wallpapers)
Bilder, die sich an ihren Seiten nahtlos an die gegenüberliegenden Seiten anschließen.
Schaltflächen
(Buttons)
Ersatz für Schaltflächen in Formularen oder als Verweis.
Symbole
(Textergänzung/-ersatz)
Kleine Grafiken (max. 32x32 Pixel), die den Fließtext einer Seite auflockern oder ersetzen.
Trennleisten
(Bars)
Ersatz für die in HTML vorgesehenen Trennlinien, wenn die zu langweilig sind.
Auflistungspunkte
(Dots)
Ersatz, wenn die in HTML vorgesehenen Listenpunkte nicht ausreichen.
Illustrationen
(Cliparts)
Aussagekräftige, meist humorvolle Grafiken, die größere Texte ansprechend auflockern können.
Vorschau-Grafiken
(Thumbnails)
Kleine Vorschau-Bilder auf größere, die der Benutzer (wenn gewünscht) mit einem Klick anzeigen kann.

Weitere Tips zu Webgrafik: Grafik-Kurs


StarHTML Weiteres
Blinde Tabellen   Browser-Kompatibilität

Martin Zwirner ©3/2002 EMail Online-Forum