Grafiken_im_Web

Grafiken werden mit speziellen Grafikprogrammen erstellt und bearbeitet. Eine Anleitung
dafür würde den Rahmen dieses Buches bei weitem sprengen, jedoch sollten an dieser Stelle
einige grundsätzliche Eigenheiten von Grafiken im Web angeführt werden. Alle anderen
Vorgangsweisen, Techniken und Arbeitsabläufe entnehmen Sie bitte entsprechender
Fachliteratur zu den einzelnen Programmen.
Grundlagen
Grafik ist nicht gleich Grafik. Beim Arbeiten für das Web müssen ganz spezielle Dinge
berücksichtigt werden, wobei die Kunst darin besteht, qualitativ hochwertige Grafiken mit
geringen Ladezeiten zu entwerfen. Generell gilt: Je größer die Grafik ist und je mehr Grafiken
Sie auf einer Webseite platzieren, umso länger wird auch die Ladezeit der Seite.
Für das Web werden zwei Typen von Grafiken genutzt: Pixel-Grafiken und Vektor-Grafiken.
Pixel oder Vektor?
Pixel- oder Bitmap-Grafiken:
Pixel-Grafiken setzen sich aus einzelnen Bildpunkten (= Pixel) zusammen. Angegeben wird
die Auflösung von solchen Grafiken in dpi (= dots per inch = Punkte pro Zoll, wobei 1 Zoll =
2,54 cm). Standard-Monitore können physikalisch nur 72 dpi darstellen, weshalb Grafiken für
das Web auch keine höhere Auflösung besitzen müssen.
Bei Pixel-Grafiken wird jeder einzelne Bildpunkt abgespeichert und mit einer bestimmten
Farbe versehen. Da die Anzahl der Bildpunkte in der Grafik genau festgelegt ist, können diese
Bilder nicht verlustfrei vergrößert werden. Photos werden üblicherweise in diesem Format
gespeichert.
Pixel-Grafiken werden mit Programmen wie beispielsweise Corel Photo-Paint oder Adobe
Photoshop erstellt und bearbeitet.
Vektor-Grafiken:
im Gegensatz zu Pixel-Grafiken besteht eine Vektor-Grafik nicht aus einzelnen Bildpunkten,
sondern aus farbigen Flächen. Es werden nur die Start- und Endpunkte einer Linie
gespeichert, die Punkte dazwischen werden automatisch generiert. Vektorgrafiken können
daher verlustfrei vergrößert werden.
Ein weiterer Vorteil liegt darin, dass ihre Dateien kleiner sind als diejenigen von optisch
gleich großen Bitmap-Grafiken.
Pixel-Grafiken werden mit Programmen wie beispielsweise CorelDRAW oder Adobe
Illustrator erstellt und bearbeitet und sehen meist wie Comics aus.
Verschiedene Grafik-Formate
Die richtige Auswahl des Grafik-Formates entscheidet über die Qualität und die Ladezeit.
Fehler, die bei der Auswahl der richtigen Grafik begangen werden, können später nicht mehr
korrigiert werden.
Das GIF-Format (*.gif):
Das GIF-Format wurde für den Online-Dienst Compuserve entwickelt und ist auf allen
Betriebssystemen verwendbar. Mittlerweile ist es zum Web-Standard geworden und bei
Webdesignern das beliebteste Grafik-Format.
GIF-Grafiken bestehen aus 256 Farben und eignen sich in erster Linie für Pixel-Grafiken. Für
hoch auflösende Fotos ist es dieses Format auf Grund der geringen Farbtiefe (8 bit) nicht
geeignet.
GIF arbeitet bei der Komprimierung mit dem LZW-Verfahren (benannt nach den Entwicklern
Lempel, Zev und Welch). Es ist verlustfrei, wodurch das dekomprimierte Bild genauso wie
das Original aussieht. Die durchschnittliche Kompression beträgt dabei 4:1.
Besonders attraktiv ist das GIF-Format durch einige Besonderheiten:
Interlacing:
Normalerweise baut der Browser Bilder nach dem Laden Zeile für Zeile auf. Je größer nun
das Bild ist, umso länger dauert es auch, bis der User erkennen kann, was er gerade lädt. Im
Gegensatz dazu baut das Interlacing vorerst ein Gesamtbild mit sehr unscharfen Konturen auf,
mit steigender Datenmenge verschärft sich das Bild zunehmend. Der Vorteil für den Besucher
liegt darin, dass er Bilder bereits ab etwa der zur Hälfte geladenen Datenmenge erkennen und,
wenn gewünscht, den Ladevorgang vorzeitig beenden kann.
Um ein solches Bild herzustellen, müssen Sie in der Software, die Ihre GIF-Komprimierung
ausführt (z.B. Fireworks, Adobe Photoshop), die Option Interlaced auswählen.
Transparenz (GIF89a-Format):
Beim GIF89a-Format besteht die Möglichkeit, eine Farbe des Bildes als transparent zu
definieren. Der Browser stellt alle Pixel dieser Farbe durchsichtig dar, wodurch an diesen
Stellen der Hintergrund der Seite durch das GIF-Bild durchscheint.
Achten Sie beim Erstellen einer
transparenten GIF-Grafik darauf,
dass Sie die Option Anti-Aliasing
(Glätten) deaktivieren, da ansonsten
die Übergänge zum transparenten
Bereich ungenau werden und
so genannte „Blitzer“ entstehen.
Animation:
Beim Surfen durch die weiten Welten des Webs haben Sie sicherlich schon bewegte Pfeile,
rotierende Kugeln, tanzende Mäuse, springende Frösche, blinkende Herzen und funkelnde
Sternschnuppen gesehen. Solche Animationen können mit GIF-Dateien erstellt werden, indem
mehrere Einzelbilder hintereinander gesetzt und nach einer vorgegebenen Zeit gegeneinander
ausgewechselt werden.
In Corel Photo-Paint und Fireworks beispielsweise können Sie solche Animationen direkt
erstellen, ansonsten müssen Sie alle Bilder einzeln erstellen, abspeichern und mit einer
speziellen Software zusammenstellen und bearbeiten. Die Geschwindigkeit der Abfolge lässt
sich bei der Erstellung der Animation festlegen.
Das JPEG-Format (*.jpg):
Das JPEG-Format (Joint Photographic Experts Group) kann im Gegensatz zum GIF-Format
bis zu 16,7 Millionen Farben darstellen. Es ist die effizientere Möglichkeit, um komplexe,
hoch auflösende Fotos und Grafiken darzustellen. Die Dateigröße wird hier durch
Datenreduktion verringert, wobei die Helligkeitsinformationen von den Farbtönen getrennt
werden. Das JPEG-Format behält dabei eine gute Kopie der Schwarz-Weiß-Version des
Bildes, das unser Auge wahrnehmen kann, und verwirft die meisten Farbunterschiede, die wir
nicht mehr unterscheiden können.
Im Gegensatz zum GIF-Format ist das JPEG-Format leider nicht verlustfrei, da bei der
Komprimierung Bild-Informationen verloren gehen. Je höher der Komprimierungsgrad der
Datei ist, umso schlechter wird die Qualität des Bildes. Die Kompression beträgt dabei von
10:1 bis 100:1.
In einigen Grafikprogrammen wie beispielsweise Fireworks kann dieser Komprimierungsgrad
beim Speichern der Datei stufenlos eingestellt werden, andere Programme wie Adobe
Photoshop geben verschiedene Stufen vor. Je kleiner dabei der Komprimierungsgrad gewählt
wird, umso besser ist die Bildqualität, aber umso größer auch die Datei.
Die Komprimierung ist nicht mehr rückgängig zu machen. Daher sollten Sie die OriginalDatei an einer anderen Stelle sichern, bevor Sie sich an ein Experiment wagen.
Das JPEG-Format unterstützt leider keine Transparenz, kein Interlacing und keine
Animationen.
Das PNG-Format (*.png):
Das PNG-Format (Portable Network Graphics) wurde eigens für das Web entwickelt und
vereint die Vorzüge von GIF und JPEG. PNG-Grafiken können mit bis zu 48 Bit Farbtiefe
gespeichert und trotzdem verlustfrei komprimiert werden. Zusätzlich können bis zu 16,7
Millionen Farben dargestellt werden. PNG unterstützt Transparenz und Interlacing, aber keine
Animationen.
Der Nachteil von PNG-Grafiken liegt darin, dass sie erst mit Browsern der 4. Generation oder
höher dargestellt werden können. Bei der Gestaltung von Webseiten ist dieses Format daher
noch mit Vorsicht zu verwenden, um nicht einen, wenn auch geringen Teil der Besucher zu
verärgern.
Qualität von Web-Grafiken
Für die Qualität einer Grafik im Web sind mehrere Faktoren bestimmend:
Die Qualität der Grafik selbst
Das Betriebssystem
Der Browser
Der Monitor
Die Grafikkarte
Wird eine Web-Grafik aufgerufen, so wird sie in verschiedenen Browsern unterschiedlich
dargestellt. Der Netscape Navigator setzt die Farben aus seiner eigenen CLUT-Farbtabelle
neu zusammen, während der Internet Explorer das Windows-Farbschema verwendet.
Nur die 216 sicheren Standard-Farben werden von allen gängigen Browsern identisch
gemischt und dargestellt. Stößt der Browser aber auf eine Farbe, die nicht in dieser Palette
enthalten ist, wird eine ähnliche Farbe ausgewählt oder eine vollkommen neue Farbe gemischt
(„Dithering“).
Die Farbtiefe:
Die Farbtiefe eines Systems wird vom Monitor und der zugehörigen Grafikkarte bestimmt.
Sie wird in BITs angegeben und setzt sich wie folgt zusammen:
1
2
3
4
5
6
7
8
9
10
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
Bit Farbtiefe
2 Farben;
4 Farben;
8 Farben;
16 Farben;
32 Farben
64 Farben;
128 Farben;
256 Farben;
512 Farben;
1024 Farben;
32
Bit Farbtiefe 16,7 Millionen Farben.
bis zu
Die meisten dieser Faktoren sind benutzerabhängig und können von ihnen nicht beeinflusst
werden. Trotzdem sollten Sie über diese Abweichungen Bescheid wissen, wenn Sie eine
Webseite planen und erstellen.
Grafiken für das Web – Woher?
Um an Grafiken für die eigene Webseite zu gelangen, gibt es mehrere Möglichkeiten, die sich
wieder in zwei Kategorien einteilen lassen:
illegale Methoden und
legale Methoden.
Illegale Methoden:
Die einfachste und billigste Quelle für Web-Grafiken ist das Web selbst. Sie können
prinzipiell (fast) jeden Hintergrund, jede Grafik und jedes Bild speichern und für Ihre eigene
Webseite verwenden. Bedenken Sie allerdings immer, dass alle Bilder und Grafiken im
Allgemeinen einer Copyright-Bestimmung unterliegen. Wenn Sie eine kommerzielle
Webseite gestalten, müssen Sie die Rechte für die verwendeten Grafiken erwerben. Private
Seiten werden kaum kontrolliert und unterliegen nicht unbedingt diesen strengen Regeln.
Hintergrund speichern:
Haben Sie auf einer Seite einen Hintergrund entdeckt, der Ihnen gefällt, klicken Sie mit der
rechten Maustaste auf eine beliebige Stelle dieses Hintergrundes und wählen aus dem Menü
den Punkt Hintergrund speichern unter... . Weisen Sie einen entsprechenden Speicherort zu.
Der Hintergrund wird in dem Format gespeichert, in welchem er auf der entsprechenden Seite
vorliegt. Sie haben dabei keinen Einfluss auf das Grafik-Format, können ihn aber sofort in
Ihre Seite einbauen. Einige Grafiken im Web sind jedoch geschützt und können nicht
gespeichert werden.
Legen Sie sich ein eigenes Ordner-Archiv für Grafiken und Bilder aus dem Web an. Kopieren
Sie die entsprechenden Dateien vor dem Einbau in Ihre Webseite dann in denjenigen Ordner,
der mit der Seite „hochgeladen“ werden soll.
Grafik/Bild speichern:
Die Vorgangsweise ist die gleiche wie beim Speichern eines Hintergrund-Bildes. Klicken Sie
die entsprechende Grafik mit der rechten Maustaste an und wählen Sie aus dem KontextMenü den Punkt Bild speichern unter... .
Das gespeicherte Bild kann in einem Grafik-Programm weiterverarbeitet oder direkt in die
eigene Webseite eingebaut werden. Sie haben jedoch keinen Einfluss auf die Auflösung des
Bildes. Schlecht auflösende Grafiken können auch mit enormem zeitlichem Aufwand nicht
mehr verbessert werden.
Legale Methoden:
Legale Methoden, an Grafiken zu kommen, sind in jedem Fall aufwändiger und meist auch
teurer als das Anzapfen illegaler Quellen. Sie können jedoch auch in Zukunft mit ruhigem
Gewissen surfen – wenn Ihnen etwas daran liegt.
Grafik-CDs:
Kaufen Sie sich eine oder mehrere CDs mit vorgefertigten und frei verwendbaren WebGrafiken. Es gibt unzählige davon – gute und weniger gute.
Selbst zeichnen:
Seien Sie selbst kreativ und schöpfen Sie die Möglichkeiten Ihrer Grafik-Programme voll aus.
Spielen Sie Leonardo, mit der Zeit werden Sie sogar Spaß daran haben!
Legal aus dem Web:
Einige Webseiten bieten völlig kostenlos Grafiken zur freien Verwendung an. Füttern Sie Ihre
Suchmaschine mit Begriffen wie gifs, animated gifs, free download, buttons, bars,
backgrounds und/oder kombinieren Sie diese.
Einfügen einer Grafik
Zum Einfügen einer Grafik, eines Fotos oder Bildes wählen Sie das Menü Einfügen - Bild... .
Im darauf folgenden Fenster klicken Sie auf die Befehls-Schaltfläche Durchsuchen...
und geben die Position des einzufügenden Bildes an; bestätigen Sie über die Schaltfläche
Öffnen.
Grafiken und Bilder sollten Sie immer in der Originalgröße (1:1) einfügen und nicht
skalieren. Einige Editoren und Programme bieten zwar diese Möglichkeit, manche Browser
können diese skalierten Bilder aber nicht darstellen. Größenänderungen führen Sie daher
besser in einem eigenen Grafik-Programm durch, bevor Sie das Bild in die Webseite
einfügen.
Ausrichtung
Die eingefügte Grafik kann nun linksbündig, zentriert oder rechtsbündig ausgerichtet werden.
Ebenso kann der linke Einzug vergrößert oder verkleinert werden. Befindet sich das Bild mit
einem Text in der gleichen Zeile, kann dies zu unschönen Verzerrungen führen.