Es gibt eine Vielzahl an unterschiedlichen Grafikformaten. Dies ist dadurch begründet, dass die Anforderungen bei deren Entwicklung zum Teil sehr speziell waren. Deshalb ist es wichtig, dass optimale Grafikformat für Eure Websitegrafiken auszuwählen. Wenn man das nicht tut, kann es sein, dass die Grafik an Qualität abnimmt, oder eine zu lange Ladezeit entsteht.

Ich möchte Euch, die derzeit verwendeten Grafikformate im Web vorstellen.

GIF (Grafik Interchanged Format):

Das GIF-Format wurde von Compuserve für den Online-Einsatz entwickelt und kann maximal 256 Farben pro Datei speichern. Anstatt alle Bits der Datei abzuspeichern, wird nur die Anzahl der aufeinanderfolgenden gleichen Bits abgespeichert und so eine Komprimierung erreicht. 


Ein entscheidendes Merkmal des GIF-Formates ist, das es Bilder mit in waagerechter Richtung wiederkehrenden Mustern besonders gut komprimieren kann. Alle Kästchen bestehen aus den selben Farben! - haben aber durch die Art der Farbanordung unterschiedliche KB-Zahlen.

110 KB	644 KB	155 KB	803 KB

Wenn das Bild es zulässt, dann kann es auch mit nur 16 oder zwei Farben abgespeichert werden. Der aktuell gültige Standard des GIF-Formats ist das "89er-Format", das über die Komprimierung hinaus drei Möglichkeiten bietet, die es für den Einsatz auf Webseiten besonders attraktiv macht:

» 1. GIF-Datei ohne Zeilensprung:
Die Grafik baut sich zeilenweise von oben nach unten auf.

» 2. GIF-Datei mit Zeilensprung (interlaced):
Die Grundstruktur der Grafik in grober Auflösung erscheint schnell auf dem Bildschirm, der weitere Aufbau zeigt eine schrittweise immer feinere Auflösung der Grafik an. Dies wird häufig als optischer Effekt eingesetzt.

» 3. Animierte GIF-Datei: Mehrere (verschiedene) Bilder werden in einer GIF-Containerdatei abgespeichert, und mit Steuerungsanweisungen versehen. (geht z.B. Gif Animator von Ulead)

» Transparenter Hintergrund
Grundsätzlich kann eine der in der Grafik vorhandenen Farben als transparent definiert werden. I.d.R. wird dies auf den Hintergrund angewandt. Hat also z.B. die Web-Seite eine grauen Hintergrund und die darauf positionierte Grafik einen weißen, dann wirkt dies störend. Wird der Hintergrund der Grafik in einen transparenten umgewandelt, dann erzielt sie auf jedem Hintergrund eine optisch ansprechende Wirkung.

Beispiel:

nach oben

» JPG (Spezifikation der Joint Photographic Experts Group im File Ingerchange Format):

Eine JPEG-Grafik wird sequentiell von links oben nach rechts unten angeordnet und kann pro Bild bis zu 16,7 Millionen Farben abspeichern. Daher eignet es sich v. a. für Fotos und Grafiken mit fein abgestuften Farbverläufen. Das Abspeichern einer Datei in einer Auflösung von 16,7 Millionen Farben bedeutet allerdings nicht, dass der Empfänger dieser Bilddatei die Farben auf seinem Bildschirm auch sehen kann, denn das hängt von dessen Monitorfabrikat, Monitoreinstellung, Grafikkarte und Browser... ab. Die gängigen Werte liegen heute zwischen 256 und 64 000 Farben.

JPEG hat aufgrund seines Komprimierverfahrens ein Minimum an Datenaufkommen. Deshalb bietet es nur bei größeren Bildern (mehr als 80*80 Pixel) Vorteile. Die Stärke der Kompression kann je nach Bedarf variiert werden. Je höher der Kompressionsfaktor, desto schlechter die Bildqualität.

Beim der Umwandlung ins JPEG-Format können i. d. R. zwei Werte bestimmt werden:

• Kompressionsfaktor: Für eine gute Bildqualität sollte dieser Wert zwischen 5 und 10 liegen

• DPI-Dichte: für JPG-Dateien im WEB sind 70-100 dpi ausreichend

» Mit JPEG2000 wird es ein Standardformat geben, das auf der Wavelet-Transformation basiert. Noch höhere Komprimierung, verlustfreie Teilbereiche und Toleranz gegenüber Datenübertragungsfehler sind einige Eigenschaften des neuen Grafikformates. Zudem kann man die Art der Progression wählen (Qualität, Auflösung, Komponente, Position) und deren Umfang steuern. So kann der Nutzer den Ladevorgang bei ausreichender Qualität oder Auflösung stoppen bzw. auf Wunsch weitere Details nachladen. Dieses Format gibt es im Grafikprogramm PhotoImpact 7!

Weiteres zur Komprimierung einer Grafik findet Ihr hier.

nach oben

Grafiken haben ein wesentlich höheres Datenvolumen als Textdateien. Je höher die Auflösung des Bildes, desto größer ist die Datei, desto länger dauert deren Übertragung im Internet. Auf Webseiten sollten also nur kleine und wenige Bilder vorhanden sein, v. a. Start-Seiten sollten nicht mit Bildern überfrachtet werden. Ansonsten kann davon ausgegangen werden, dass die Übertragung vom Anwender entweder abgebrochen wird, oder ein Laden von Grafik deaktiviert wird. 

Will man auf ein großes Bild nicht verzichten, dann kann eine verkleinerte Version (Thumbnail) versehen mit Angaben zur Datenmenge als Link zum eigentlichen Bild dienen, das bei Bedarf auf einer separaten Seite geladen werden kann.

» PNG (Portable Network Graphics-Format):
Das Portable Network Graphics-Format soll der Nachfolger des GIF-Formats werden. PNG unterstützt 16 Mio. Farben, Transparenz, verlustfreie Kompression, inkrementelle Anzeige der Grafik (erst Grobstruktur, bis Datei ganz übertragen ist) und das Erkennen beschädigter Dateien. Ausserdem kann das PNG-Format, im Gegensatz zum GIF-Format, lizenzfrei verwendet werden. Der Netscape Navigator ab Version 4.04 bzw. der Microsoft Internet Explorer ab Version 4.01 unterstützen das PNG-Format. 

Wenn Sie jetzt etwas sehen, dann kann Ihr Browser PNG darstellen:

UFO - Ulead-Datei für Objekte

Programmspezifische Datei des Grafikprogrammes PhotoImpact. Das heisst die einzelnen Objekte der Bilddatei bleiben auch nach dem Speicher/Schliessen jederzeit editierbar/freigestellt. Achtung ist aber Versionsabhängig. Nur höhere oder gleiche Versionen können eine .ufo-Datei öffnen.