Quelltext der Seite Bilder und Graphiken im Web

[[category:Webdesign]]
[[category:Multi- und Hypermedia]]

== Web-Grafik ist nicht gleich Grafik ==

[[definition::Die Kunst der Webgrafik besteht darin, qualitativ hochwertige Grafiken mit geringen Ladezeiten zu entwerfen.]] Wenn man Grafiken für das World Wide Web erstellt, so muss man sich zunächst ein Bild davon machen, in welchen Formaten Grafiken vorkommen können. Folgende Faktoren müssen vor dem Erstellen von Grafiken für eine Webseite beachtet werden:

- Bildschirmgröße der Grafik: hierbei gilt, je größer
das Bild desto mehr Speicherplatz verbraucht es.

- Art der Grafik: handelt es sich um ein Navigationselement,
ein Foto oder ein anderes grafisches Element.

- Wie / Wo soll die Grafik auf der Seite dargestellt werden?

- Auf welchem Hintergrund soll die Grafik stehen?

Aufgrund der meist geringen Datenübertragungsrate sollten Grafiken möglichst wenig Datenumfang besitzen. Allgemein läßt sich sagen, daß Qualität und Größe der Grafik im Verhältnis zum Datenumfang stehen. Je größer das Bild und je höher die Qualität (Farbtiefe) desto größer das Datenvolumen. Grafiken mit hohem Datenumfang werden natürlich länger geladen.
Als Abhilfe hat man mehrere Grafikformate geschaffen, die qualitativ hochwertige Grafiken trotzdem mit geringem Datengehalt verbinden.

== '''Typen von digitalen Bildern''' ==

Grundsätzlich gibt es zwei Arten von digitalen Bildern: Bitmaps und Vektorgrafiken.


=== Bitmap-Grafiken ===
Bitmap-Grafiken setzen sich aus einzelnen Pixeln. Diese lassen sich     
sichtbar machen, wenn eine Grafik erheblich vergrößert wird. Angegeben wird die Auflösung von Bitmap-Grafiken in dpi ("dots per inch" = Punkte pro Zoll - 1 Zoll = 2,54 cm). Standardmonitore können physikalisch nur 72 dpi darstellen. Wenn man Grafiken für das Web erstellen, braucht man sich daher um höhere Auflösungen keine Gedanken zu machen. Mit diesem Wert hat man eine reale Darstellung auf jedem Monitor mit gleicher Auflösung. Bitmaps sichern Informationen wie Farbwert und Position jedes einzelnen Bildpunkts. Deshalb können sie am Monitor sehr schnell angezeigt werden, da für die Darstellung keine komplizierten Berechnungen erforderlich sind.
Die Speichermethode hat aber zwei entscheidende Nachteile:
Bitmaps in hoher Qualität blähen die Datei auf. Außerdem lassen sie sich nur mit Informationsverlust vergrößern, da die Position der Bildpunkte neu berechnet  werden muss und der Computer hier nur mit Näherungswerten arbeiten kann.


=== Vektorgrafiken ===
Vektorgrafiken basieren auf einem anderen Prinzip. Im Gegensatz zu Bitmap-Grafiken besteht eine Vektorgrafik nicht aus einzelnen Bildpunkten sondern aus einer (farbigen) Fläche, welche durch Ausdehnung in die entsprechende Größe skaliert (ausgedehnt) werden kann. Sie werden in mathematischen Werten (Vektoren) angegeben, dadurch sind ihre Dateien kleiner, als die optisch gleichgroßen Bitmap-Grafiken. 
Vektorgrafiken gibt es schon lange, doch erst mit Aufkommen der Shockwave/Flash-Technologie sind sie im Internet richtig populär geworden. Flash-Seiten leben praktisch von Vektorgrafiken. 
Die richtige Auswahl des Grafik-Formats entscheidet maßgeblich über Qualität und Ladezeit.



== Grafikformate ==
Alle modernen Browser sind in der Lage, Grafiken im GIF- und JPEG-Format anzuzeigen. Als Nachfolger des GIF-Formats wird das PNG-Format diskutiert, das allerdings nur von den Browsern der neuesten Generation verarbeitet werden kann. GIF-Grafiken werden für einfache grafische Elemente verwendet. Für komplexe Grafiken oder Fotos ist das JPG Format besser geeignet.


=== GIF ===
Das GIF-Format („graphics interchange format“, Endung *.gif) wurde von Compuserve entwickelt, mit dem Zweck, Grafiken innerhalb von Computernetzen angemessen schnell transportieren zu können.
Dieses Format eignet sich weniger für Fotos und Grafiken mit vielen Farben, da die Farbtiefe bei GIF nur 256 Farben (8-Bit) umfasst. Die Stärke dieses Formates liegt vor allem in flächigen Grafiken mit wenigen Farben wie z.B. Logos, Schriften oder Menüelementen.

==== Eigenschaften von GIF-Komprimierungsverfahren ====
Das GIF-Komprimierungsverfahren fasst gleichfarbige Pixel innerhalb der einzelnen Zeilen zu Gruppen zusammen. Deshalb bleiben z.B. bei Fotos oder Farbverläufen die Dateien sehr groß, weil es hier aufgrund vieler unterschiedlicher Bildpunkte nicht viel zusammenfassen kann. Grundsätzlich sollten Grafiken, die als GIF abgespeichert werden sollen, mit einer 8-Bit Farbpalette erstellt werden.

==== Vorteile der GIF-Format ====
===== 1.Dithering =====
Wenn die GIF-Kompression stattfindet, werden benachbarte Farben gemischt zu einer neuen Farbe, die in der Farbpalette angepaßt wird. Man nennt diesen Effekt „Dithering“ (deutsch: Sprenkel-Effekt). Das ist ähnlich wie beim Zeitungsdruck: nebeneinanderliegende Farbpunkte vermischen sich beim Betrachten zu einer neuen neuen Farbe. Die Eigenschaft des Ditherns kann bei der GIF-Optimierung eingestellt werden. Eine geditherte Grafik im GIF-Format nimmt ein wenig mehr Speicherplatz ein.
Das GIF-Format macht einige Besonderheiten möglich, die für das Web-Design besonders attraktiv sind: das Interlacing, die Farbtransparenz und die Animation.
===== 2.Interlacing =====
Der Browser baut das Bild nach dem Laden gewöhnlich Zeile für Zeile auf. Je größer die Datei, desto länger dauert es, bis der Betrachter erkennen kann, was er gerade lädt. Das Interlacing hilft diesem Problem ab. Es baut zunächst ein Gesamtbild mit unscharfen Konturen auf, das zunehmend schärfer kontrastiert. Schon nach dem Runterladen der halben Datenmenge, ist das Bild sichtbar. Auf diese Weise kann der Surfer schon früh erahnen, was auf ihn zukommt und den Ladevorgang abbrechen, wenn er es möchte. 
===== 3.Transparenz =====
Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am Besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen "durchsichtig" erscheinen und der Hintergrund schimmert durch. Wie das in der Praxis funktioniert, finden Sie im Artikel über die "Bildkomprimierung mit Fireworks3".
===== 4.Das animierte GIF =====
Animationen sind nichts Neues. Sicher haben Sie im Internet schon mal sich bewegende Pfeile gesehen. Dazu wird die GIF-Grafiken aus mehreren Einzel-Grafiken zusammensetzt, hintereinander gelegt und nach einer vorgegebenen Zeit gegeneinander ausgewechselt.
Außerdem erlaubt die GIF-Spezifikation die Animation von mehreren Einzelbildern, sogenannte „animated gifs“. Dies sind meist kleine bewegte Grafiken, die in einer bestimmten Zeit immer dem gleichen Bewegungsablauf folgen.

==== Nachteil der GIF-Format ====
Der große Nachteil des gif-Formats liegt in seiner Farbbeschränkung: Es können maximal 256 Farben je Grafik gespeichert werden. Damit ist es für alle Bilder mit Farbverläufen, z.B. Fotos, untauglich.


=== [[JPEG]] ===
Das JPG, auch JPEG (Joint Photographic Experts Group), kann bis zu 16,7 Millionen Farben darstellen. Anders als beim GIF, wird beim JPG durch Datenreduktion die Dateigröße verringert. Es wird nur bei Bildern verwendet, die mehr als 256 Farben enthalten. Farbreduzierung wie beim GIF ist hier aber nicht möglich.
Das JPEG-Format (Joint Photographic Experts Group, *.jpg / *.jpeg) ist sehr gut geeignet zum Speichern von Fotos oder Grafiken mit vielen Details und Farben.

==== Verwendung von JPEG ====
===== 1.Digitalkameras =====
Die stark miniaturisierten Speichermedien moderner Digitalkameras bieten wegen der relativ hohen Kosten nur begrenzten Speicherplatz (typischerweise zwischen 8 und 64 Megabyte). Um dennoch eine möglichst große Anzahl von Aufnahmen unterzubringen, nutzen fast alle Digitalkameras das JPEG-Format. Dabei lässt sich die Stärke der Kompression meist im Kameramenü auswählen. 
===== 2.ISDN, Internet und E-Mail =====
Da die Datenübertragung im Internet immer noch zu einer harten Geduldsprobe werden kann, nutzt man für die Darstellung von Fotos auf einer HTML-Seite und für das Verschicken per E-Mail das JPEG-Format, da es die Download- beziehungsweise Übertragungszeiten deutlich verkürzt. Dasselbe gilt auch für die ISDN-Übertragung von Bilddateien, denn auch mit dessen 64 Kilobit pro Sekunde benötigt man für das Versenden einer 10 Megabyte großen Bilddatei immer noch rund 20 Minuten.
===== 3.Online  Print  Service =====
Auch bei dem beliebten Fujicolor Order. Net-Dienst, bei dem digitale Bilder auf echtes Fotopapier belichtet werden, empfiehlt es sich, die Aufnahmen aus Zeitgründen im JPEG-Format zum Labor zu übertragen. 
===== 4.Bildtransport =====
Mit der JPEG-Kompression "klein gemachte" Bilder lassen sich selbst bei hoher Auflösung meist noch auf einer normalen Diskette speichern und so zwischen verschiedenen Computern austauschen. 
===== 5.Archivierung =====
Auch wer seine digitale Fotosammlung definitiv archivieren möchte - beispielsweise auf einer CD -, kann dank der JPEG-Kompression im Vergleich zu unkomprimierten Formaten ein Vielfaches an Aufnahmen auf einem Datenträger unterbringen. 
===== 6.Plattformübergreifender Datenaustausch =====
Da das JPEG-Format von Programmen aller gängiger Betriebssysteme unterstützt wird, ist ein problemloser Austausch von Bildern zwischen (beispielsweise) Windows-, Macintosh- und Linux-Rechnern möglich.

==== JPEG-Verfahren ====
Es macht sich die Schwäche des menschlichen Auges zu Nutze, Farben schlechter unterscheiden zu können als Helligkeitsabstufungen. JPEG fasst daher Pixelgruppen aus 8 mal 8 Bildpunkten zusammen, analysiert sie und speichert - vereinfacht ausgedrückt - nur einen Farbmittelwert, während die Helligkeitsunterschiede erhalten bleiben. Das dahinter stehende mathematische Verfahren trägt den schönen Namen "Diskrete Cosinus-Transformation".
===== Vorteil der Technik von JPEG-Verfahren =====
Es lassen sich ungeheure Datenmengen einsparen, so dass die Bilder erheblich weniger Speicherplatz benötigen und auch problemlos über das Internet verschickt werden können. Allerdings ist diese Art der Kompression nicht verlustfrei, weil Teile der im Original vorhandenen Bildinformationen "unter den Tisch" fallen und das Ausgangsbild nicht 100prozentig wieder zu rekonstruieren ist. Jedoch sollte man sich davon nicht abschrecken lassen, da eine mäßig eingesetzte JPEG-Kompression kaum sichtbare Qualitätseinbußen mit sich bringt.
===== Nachteil der Technik von JPEG-Verfahren =====
Die JPEG-Komprimierung ist immer verlustbehaftet. Das Bild verliert bei jedem Abspeichern Bilddetails, hat man einmal eine Grafik in diesem Format gespeichert, lassen sich die Details nicht mehr wiederherstellen. Das JPEG-Format unterstützt keine Transparenz. Durch eine höhere Qualitätseinstellung lässt sich der Detailverlust reduzieren.

=== PNG ===
Beim PNG (Portable Network Graphics) handelt es sich um ein schon altes, aber neu ins Spiel gebrachtes Grafikformat. Es vereint die Vorzüge vom GIF und JPG. PNG- Grafiken können mit bis zu 48-Bit-Farben abgespeichert und trotzdem verlustfrei komprimiert werden, und das mit einer Qualität von 16 Millionen Farben + 256 Transparenzstufen (GIF gibt nur bis zu 8 Bit wieder).

==== Vorteile des PNG-Dateiformats ====
1.nahezu verlustfreie Kompression

2.kompatibel mit gängiger Bildbearbeitungssoftware

3.vollständiger Erhalt von Transparenzen

4.integrierter Alphakanal

5.plattformübergreifendes Dateiformat

6.Browser-Vorschau möglich

==== Nachteil des PNG-Dateiformats ====
PNG kann erst mit Browsern der vierten Generation betrachtet werden. Alle älteren Browser benötigen ein Plug-In. Das PNG könnte ein Format für die Zukunft sein. Das PNG-Format ist jedoch wenig verbreitet, nicht zuletzt wegen der relativ hohen Datenmenge, die im Gegensatz zu GIF und JPEG wesentlich größere Dateien produziert.


=== TIFF ===
Das Tagged-Image File Format (TIFF) wird verwendet, um Dateien zwischen unterschiedlichen Programmen und Plattformen auszutauschen. TIFF ist ein flexibles Bitmap-Format, das von praktisch jedem Mal-, Bildbearbeitungs- und Seitenlayoutprogramm unterstützt wird. Auch nahezu alle Desktop-[[Scanner|Scanner]] produzieren TIFF-Bilder. Das TIFF-Format unterstützt CMYK-, RGB- und Graustufen-Dateien mit Alpha-Kanälen und Lab-, indizierte Farb- und Bitmapdateien ohne Alpha-Kanäle. TIFF unterstützt LZW-Komprimierung.

=== SVG - Scalable Vector Graphics ===
Wie der Name schon sagt ist "SVG" ein Vectorgrafikformat, das heißt die Informationen zur Darstellung der Grafik werden als Textinformationen "aufbewahrt". Eine einfache Linie definiert sich über ihren Startpunkt (x,y) und den Endpunkt (x,y). Zur weiteren Beschreibung des Aussehens kommen Angaben wie Farbe und Dicke der Linie hinzu.

==== Grundlegende Elemente ====
Beschrieben werden Elemente wie Linie, Rechteck, Kreis, Ellipse, Polygone, Text und so fort. 
 '''Beispiel Linie''' 
 <line x1="160" y1="100" x2="210" y2="100" stroke-width="2" 
 stroke="black" />
Diese Linie beginnt 160px von links, 100px von oben und hat eine Länge von 50px sowie eine Dicke von 2px in der Farbe Schwarz. Die Maßeinheit "Pixel" ergibt sich aus der Tatsache, dass keine anderen Angaben gemacht wurden. Möglich sind Angaben wie in(Inch), pt(Points), pc(Pica), cm, und mm.
 '''Beispiel Kreis''' 
 <circle cx="185" cy="70" r="10" fill="yellow" />
Mitte des Kreises ist 185px von links, 70px von oben und der Radius beträgt 10px die Füllfarbe ist gelb.
 '''Beispiel Rechteck'''
 <rect x="160" y="2" width="50" height="50" fill="blue" 
  stroke="black" stroke-width="2" />
Beschreibt ein blaues Quadrat mit schwarzem Rahmen.

==== Vorteile von SVG ====
1.Die Objekte werden mit Text beschrieben, was den Suchmaschinen die Möglichkeit der Indizierung dieser Angaben ermöglicht.

2. Ein weiterer Vorteil von SVG ist die geringe Dateigröße im Vergleich zu Bitmaps. Bei komplexen Darstellungen wird das besonders deutlich.
 
3.Freie Zoomen ohne Qualitätsverlust.



== Einsatz der Grafiken in HTML-Dokumenten ==
Grafiken werden nicht in HTML-Dokumenten selbst gespeichert. Im Dokument steht lediglich ein Verweis auf die Datei, die die Grafik enthält. Der Browser fügt sie beim Anzeigen der Grafik hinzu.



== Quellen ==
* Über Bildformate: http://www.aecweb.de/m/f-pixf.htm

* Über JPEG: http://de.wikipedia.org/wiki/JPEG

* Über Licht und Farbe: http://www.win-seminar.de/adobe/farbe.php

* Über Graphiken: http://www.drweb.de/webgrafik/index.shtml
(letzter Zugriff: 20.07.2010)