|
Grafikformate im Internet
Auszug aus "Webdesign
in der Praxis" von Philippe Jean-Richard, Reihe SmartBooks
erschienen bei SmartBooks Publishing AG, Kilchberg 2000
Dieser Lehrstoff ist wichtig, damit Sie wissen
- welche Dateiformate das Web überhaupt
aufnehmen und darstellen kann
- welche Dateiformate für welche Art von
Grafiken geeignet sind
- wie Sie ein Bild optimal komprimieren können.
Know-how Grafikformate
Dateiformate
| tif |
jpg (jpeg) |
| eps |
gif |
| bmp |
png (ping) |
| psd (Photoshp Datei) |
|
| cdr (CorelDraw Datei) |
|
| fh10 (freehand) |
|
JPEG
Joint Photographic Expert Group
Anwendung:
Fotos und Grafiken, welche mehr als 256
Farben benötigen, z.B. Grafiken mit feinen Farbverläufen
Vorteil:
- kann 16,7 Millionen
Farben darstellen
- fast verlustfreie
Komprimierung
Nachteil:
- keine Transparenz
- bei jedem Abspeichern gehen Bilddaten verloren
JPEG-Kompression
Die JPEG-Kompression basiert auf dem Prinzip,
vor allem die Farbinformationen zu verringern, dabei aber
die Helligkeitsinformationen mehr oder weniger unberührt
zu lassen. Die Kompression wird dabei immer auf eine Gruppe
von Pixel (8x8 Pixel) angewendet. Bilder, deren Höhe
und Breite einen Wert darstellen, welcher durch 8 teilbar
ist, werden etwas besser komprimiert. Scharfe Kanten, wie
z.B. Schrift innerhalb einer Grafik, verschlechtern die Kompression.
Qualitätsaspekte
Jedesmal, wenn Sie ein Bild im JPEG-Format abspeichern,
verschlechtert sich die Qualität ein bisschen. Darum
ist es ratsam, Änderungen an der Grafik im Originalformat
vorzunehmen, um dann die Grafik im JPEG-Format abzuspeichern.
Darstellungsoption
Das Bild wird zuerst verschwommen angezeigt
und dann immer schärfer. Diese Methode hat den Vorteil,
dass wir von Anfang an das ganze Bild sehen und uns sozusagen
darauf freuen, immer nähere Details zu erkennen. JPEG
besitzt die Möglichkeit, beim Abspeichern einer Grafik
diese so genannte progressive Option einzubeziehen.
GIF
Das GIF-Format gilt als das "Haus"-Format
von CompuServe und wurde speziell für den Online-Einsatz
entwickelt.
Anwendung:
GIF eignet sich vor allem für einfachere
Grafiken, z.B. Buttons, Symbole und Cliparts, Strichzeichnungen,
Karikaturen, welche nur wenige Farben besitzen und über
grössere gleichfarbige Flächen verfügen.
Vorteil:
- verlustfreie Komprimierung
- transparente Grafiken erzeugen
- Animierte Bilder
Nachteil:
- beschränkt sich auf 256 Farben
Dithering
Beim Dithering werden optisch mehr Farben erzeugt,
als in der indizierten Palette vorhanden sind. Dies wird möglich,
in dem die indizierten Farben so gruppiert werden, das unser
Auge meint, plötzlich mehr Farben zu erkennen . Geditherte
Bilder benötigen normalerweise ein wenig mehr Speicherplatz.
Warum benötigen geditherte Bilder
mehr Speicherplatz?
Das Geheimnis besteht darin, dass GIF eine Mustererkennung
durchführt, d.h. gleiche Muster innerhalb eines Bildes
sucht. Wenn z.B. 100 Pixel mit weisser Farbe nebeneinander
liegen , so würde die Information nicht lauten:
<<weiss, weiss, weiss, .....weiss>>
sondern
<<100 x weiss>>
Die zweite Variante ist viel schlanker. Bei
geditherten Bildern sind einfach zu wenig dieser Muster vorhanden.
Web-Farben
Bei den Web-Farben handelt es sich um 216
Farbtöne, welche die Browser auf den verschiedenen
Plattformen (Windows, Macintosh, uws.) gleich darstellen.
Dadurch bleibt gewährleistet, dass bei der Ansicht der
Grafik keine Farbveränderungen auftauchen. Jetzt erkennen
Sie auch den grossen Wert eines Programms wie Photoshop, welches
eine beliebige Grafik so umwandeln kann, dass diese nur noch
aus Web-Farben besteht (Wert der Web-Ausrichtung: 100%).
Vorteil von Web-Farben
Wenn Sie die Hintergrundfarbe sowie die Textfarbe
Ihrer Website einstellen, sollten Sie sich der Web-Farben
bedienen, damit Sie sicher sein können, dass diese Elemente
in jedem Browser auch wirklich so dargestellt werden, wie
Sie sie auf Ihrem Bildschirm sehen.
In manchen Programmen (Adobe Photoshop, Macromedia
Dreamweaver und Fireworks) erscheint bei der Farbauswahl auf
Wunsch die Web-Palette, d.h. Sie können direkt eine Web-Farbe
auswählten, ohne sich zuerst Gedanken machen zu müssen,
um was für Farbwerte es sich dabei handelt.
51er-Regel
Jede Farbe im Internet setzt sich aus einem
Rot-, Grün- und Blauanteil zusammen (RGB). Dies ist durch
den Aufbau des Monitors bedingt. Jeder dieser Farbwerte kann
einen Wert zwischen 0 und 255 annehmen. Nun kommt die sogenannte
51er-Regel zum Zug: Wenn jeder dieser drei Farbwerte durch
51 geteilt werden kann (ohne Rest), dann handelt es sich um
eine Web-Farbe, z.B. dunkelgrün R: 0 G:51 B: 0!
Web-Farben im hexadezimalen Zahlensystem
Im hexadezimalen Zahlensystem können Web-Farben
lediglich die Werte #00, #33, #99, #CC und #FF annehmen.
Nebenbemerkung: Für diejenigen,
denen der Ausdruck "hexadezimales Zahlensystem"
nicht geläufig ist: Es handelt sich um ein Zahlensystem,
das nicht 10 Ziffern (0-9) beinhaltet wie das Zahlensystem,
das wir in unserem Alltag gebrauchen, sondern 16 Ziffern.
Bei der 11. - 16.Ziffer hat man sich mit den Buchstaben A
- F beholfen. Auf diese Weise können mit weniger Ziffern
viel höhere Zahlen dargestellt werden.
Transparenz
Das Format GIF bietet die Möglichkeit,
innerhalb eines Bilds transparente Bereiche zu definieren.
Transparenz kann Bilder (scheinbar) aus ihrem Rechteck befreien,
indem Teile des Bildes unsichtbar gemacht werden. Somit eignen
sich transparente Bilder z.B. für Symbole, welche wir
in die Hintergrundfarbe der Website einflechten wollen.
PNG
Portable Network Graphic ist sozusagen die Antwort
auf die Einschränkungen von GIF und JPEG.
Vorteile:
- kann über 16 Millionen Farbwerte darstellen
(wie JPEG)
- die Kompression funktioniert verlustfrei
(wie GIF)
- kann transparente Farben darstellen( wie
GIF). Während aber GIF nur mit einer Transparenzstufe
(transparent oder nicht transparent) aufwarten kann, bietet
uns PNG 256 Transparenzstufen!
- besitzt eine Gamma-Korrekturfunktion, welche
die Helligkeitsunterschiede zwischen Windows- und Macintosh-Monitoren
automatisch ausgleicht
Nachteile:
- sind durchschnittlich etwas grösser
als vergleichbare GIF- oder JPEG-Dateien
- besitzt die Animationsfähigkeit von
GIF nicht
- PNG-Bilder können nur von neueren Browsern
(ab Version 4) ohne Plug-In dargestellt werden
Arten von PNG
- 8-Bit PNG: Wie bei GIF werden maximal 256
Farben dargestellt.
- 24-Bit PNG: Wie bei JPEG werden alle 16 Millionen
Farben dargestellt.
- 36-Bit PNG: Zusätzlich zu den 16 Millionen
Farben werden 8 Bit (=256 mögliche Werte) für
die Transparenzstufen reserviert.
PNG kann ebenfalls in mehreren Durchgängen
speichern.
 
|
