Im Web haben sich vier Dateiformate für Grafiken durchgesetzt: die Formate GIF, JPEG, PNG und – mit Einschränkungen – auch SVG. Die ersten drei Formate beschreiben Rastergrafiken, das vierte ein Vektorformat.
Rastergrafiken
Rastergrafiken (auch: Pixelgrafiken, Bitmaps) sind eine Methode zur Beschreibung zweidimensionaler Bilder und bestehen aus einer matrixförmigen Anordnung von Pixeln, denen jeweils eine Farbe zugeordnet ist. Die Hauptmerkmale einer Rastergrafik sind die Breite und die Höhe in Pixeln sowie die Farbtiefe. Rastergrafiken eignen sich zur Repräsentation komplexer Bilder, beispielsweise Fotos.
GIF
GIF (Graphics Interchange Format) ist ein digitales Bildformat mit guter, verlustfreier Komprimierung für Bilder mit geringer Farbtiefe (bis zu 256 Farben). Das Format wurde 1987 vom US-Onlinedienst CompuServe eingeführt und ist heute vor allem wegen seiner effizienten Kompression LZW (Lempel-Ziv-Welch-Algorithmus) populär.
GIF ermöglicht das Speichern mehrerer Bilder in einer einzigen Datei, was vor allem für einfache Animationen verwendet wird. Darüber hinaus ist es möglich, eine Farbe der GIF-Grafik als transparent zu definieren, das heißt, alle Elemente, die unter der Grafik liegen, scheinen an den Stellen durch, an denen die Grafik transparent ist.
GIF ist aufgrund seiner geringen Farbtiefe nicht für hochauflösende Grafiken und Fotos geeignet, dagegen hervorragend für weniger aufwendige Grafiken wie Hintergrundverläufe, Icons, Schaltflächen, Symbole und Zeichen.
JPEG
JPEG ist ein 1992 durch die Joint Photographic Experts Group entwickeltes und nach ihr benanntes standardisiertes Verfahren zur sowohl verlustbehafteten wie verlustfreien Kompression von digitalen Grafiken.
Das Format unterstützt Grafiken mit hohen Farbtiefen (24 Bit) und eignet sich damit optimal zum Speichern von Fotos. Nicht geeignet ist JPEG zur Speicherung von Grafiken, in denen es viele benachbarte Bildpunkte mit exakt identischen Farbwerten, wenigen Farben und harten Kanten gibt (zum Beispiel Strichzeichnungen), sowie von reinen Schwarz-Weiß-Bildern ohne Grauabstufungen.
JPEG bietet ein standardisiertes, verlustbehaftetes Kompressionsverfahren, den Baseline Codec, der im Wesentlichen wie folgt arbeitet: Es wird nach redundanten Informationen gesucht, wie zum Beispiel Ähnlichkeiten oder sich wiederholenden Mustern, die dann herausgerechnet werden, möglichst ohne die Bildqualität zu verringern. Dadurch lässt sich die Dateigröße um rund 90 Prozent reduzieren, ohne dass das ungeschulte Auge eine Verringerung der Qualität bemerken würde. Eine Kompression auf 60 Prozent ist ein guter Richtwert.
PNG
PNG (Portable Network Graphics) ist ein universelles Format, das die Vorteile von GIF und JPEG vereint und über noch weitere interessante Eigenschaften verfügt. Im Jahr 1995 wurde mit der Entwicklung begonnen. Im März 1997 wurde PNG als RFC 2083 [RFC-2083 1997] veröffentlicht. Die aktuelle W3C-Empfehlung PNG 1.1 stammt vom Januar 2003 [REC-PNG 2003].
PNG kann wie GIF Pixel aus einer Farbpalette mit bis zu 256 Einträgen verarbeiten. Darüber hinaus ist die Speicherung von Graustufenbildern mit 1, 2, 4, 8 oder 16 Bit und Farbbildern mit 8 oder 16 Bit pro Kanal (also 24 beziehungsweise 48 Bit pro Pixel) möglich. PNG ermöglicht das Abspeichern zusätzlicher Informationen in der Grafikdatei, zum Beispiel Autoren- und Urheberhinweise, und unterstützt Farbkorrekturmechanismen, die sicherstellen, dass ein Bild auf verschiedenen Systemen annähernd gleich aussieht. Während es bei GIF nur möglich ist, einer einzigen Farbe vollständige Transparenz zuzuweisen, können PNG-Grafiken Transparentinformationen für jedes einzelne Pixel oder für jede Farbe der Farbpalette enthalten. Dabei sind 8 oder 16 Bit, also 256 oder 65.536 Transparenzabstufungen möglich.
Veraltete Browser, darunter der Internet Explorer bis Version 6, haben Probleme mit der Darstellung von Transparenzen bei PNG-Grafiken. Aus diesen Gründen konnte sich das Format lange nicht so durchsetzen, wie es zu wünschen gewesen wäre. Mittlerweile kann man von einer guten PNG-Unterstützung in aktuellen Browsern sprechen, und für den IE 6 gibt es mehrere Workarounds. Zu den besten gehört PNG Behavior.
Software
Auch Webautoren benötigen Programme zum Erstellen und Bearbeiten digitaler Fotos und Grafiken, schließlich kommt kaum eine professionelle Website ohne Grafiken aus – angefangen beim Logo über Farbverläufe, Schatteneffekte und abgerundete Ecken bis hin zu Symbolen, Illustrationen und Fotografien. Auch wenn es nur darum geht, fertige Designvorlagen zu »schneiden«, das heißt einzelne grafische Elemente freizustellen, passend zu skalieren und im geeigneten Format abzuspeichern, benötigt man ein Bildbearbeitungsprogramm, mit dem man diese Arbeiten verrichten kann.
Das wichtigste Programm im Bereich der professionellen Bildbearbeitung ist Adobe Photoshop des US-amerikanischen Softwareunternehmens Adobe Systems. Aufgrund seines hohen Preises (rund 1.000 Euro) ist es für Privatanwender jedoch nahezu unerschwinglich. Für knapp ein Zehntel des Preises gibt es mit Adobe Photoshop Elements mittlerweile eine abgespeckte, deutlich günstigere Version, die für die Belange von Heimanwendern optimiert wurde. Gegenüber Photoshop fehlen zwar einige Funktionen, aber Anwender, die wie Webautoren ohnehin nur einen kleinen Teil der Funktionen benötigen, haben dadurch keinen Nachteil. Für Photoshop steht eine Vielzahl hilfreicher Einsteiger-Tutorials im Web zur Verfügung, unter anderem bei Webmasterpro.de oder PSD-Tutorials.de.
Eine kostenlose Alternative ist GIMP (GNU Image Manipulation Program), ein Bildbearbeitungsprogramm, das als freie Software unter der GNU General Public Licence veröffentlicht wird und als ein Vorzeigeprogramm der Open-Source-Bewegung angesehen wird. Der Leistungsumfang ist mit dem Adobe Photoshops vergleichbar. Bekannt wurde das Programm hauptsächlich dadurch, dass Larry Ewing den Pinguin Tux, das bekannte Linux-Maskottchen, mit GIMP entwickelt hat. Anfänglich arbeiteten nur zwei Programmierer, die kalifornischen Informatikstudenten Peter Mattis und Spencer Kimball, an dem Projekt, mittlerweile geht die Anzahl der Entwickler und Tester in die Tausende.
Die aktuelle Version können Sie von der GIMP-Homepage unter der Adresse http://www.gimp24.de herunterladen. Das deutschsprachige Benutzerhandbuch leistet Unterstützung bei der Einarbeitung. Sie finden es unter der Adresse http://www.gimp24.de/gimp_handbuch.html.
Abb. 3.9: Das freie Bildbearbeitungsprogramm GIMP
Vektorgrafiken
Eine Vektorgrafik ist ein zwei- oder dreidimensionales Computerbild, das aus sogenannten grafischen Primitiven wie Linien, Kreisen und Polygonen geometrisch modelliert ist. Um beispielsweise einen Kreis zu zeichnen, braucht es lediglich Informationen über die Koordinaten des Kreismittelpunkts sowie die Länge des Durchmessers. Diese Informationen bleiben im Bild erhalten und können gegebenenfalls durch weitere ergänzt werden, beispielsweise Informationen über Strich- und Füllfarben sowie Muster.
Vektorgrafiken können im Gegensatz zu Rastergrafiken ohne Qualitätsverlust stufenlos skaliert und verzerrt werden. Allerdings sind sie ungeeignet für die Darstellung komplexer Grafiken wie Fotos, da diese sich kaum mathematisch modellieren lassen.
Abb. 3.10: Rastergrafiken werden bei Vergrößerung pixelig, Vektorgrafiken hingegen nicht
Im Web haben sich zwei vektorgrafische Formate durchgesetzt: Flash, ein Grafik- und Animationsformat der amerikanischen Firma Macromedia, das hier nicht weiter behandelt wird, und SVG.
SVG
SVG wurde im September 2001 als W3C-Empfehlung Scalable Vector Graphics (SVG) 1.0 Specification veröffentlicht. Aktuell ist Version 1.1 vom September 2003 [REC-SVG 2003]. SVG-Dateien sind XML-Dokumente und können daher – wie XHTML-Dokumente – mit einem gewöhnlichen Texteditor erstellt und bearbeitet werden.
Einführungen wie Ralf Pohlmanns SVG-Tutorial, Marco Rosenthals SELFSVG oder die Site scale-a-vector.de von Petra Kukofka erleichtern den Einstieg. Dr. Thomas Meinikes >Learning By Coding zeigt anhand vieler einfacher Beispiele, was mit SVG so alles möglich ist.
Es gibt mittlerweile spezielle Programme wie das kostenlos verfügbare Inkscape, die die Tipparbeit zum größten Teil abnehmen und die Erstellung von SVG-Grafiken deutlich vereinfachen.
Abb. 3.11: Mit Inkscape lassen sich verhältnismäßig einfach anspruchsvolle SVG-Grafiken erstellen
Viele Browser können SVG darstellen, dazu gehören Opera ab Version 8, Safari 3, Konqueror sowie Firefox ab Version 1.5. Andere Browser benötigen ein spezielles Plug-in wie den kostenlosen Adobe SVG Viewer, dessen Entwicklung jedoch Anfang 2009 eingestellt wird. Aufgrund des enormen Potenzials ist es allerdings nur eine Frage der Zeit, bis Alternativen zur Verfügung stehen werden. Der Renesis Player der examotion GmbH könnte eine solche sein.
Dadurch dass SVG ein Klartextformat ist, können Programmierer und Grafiker SVG-Grafiken serverseitig generieren, sie mit Datenbanken kommunizieren lassen, die DOM-Struktur (siehe Kapitel 4.3) einer Grafik clientseitig per Script manipulieren, auf Benutzereingaben reagieren und vieles mehr. SVG-Grafiken können auch aus anderen XML-Formaten generiert werden.