Dieser Artikel soll einige Grundlagen über die Grafikformate für Online-Dokumente vermitteln und zeigen, dass und wie man Grafiken für diesen Zweck optimieren kann.

Grundsätzliches

Unabhängig davon, ob man die Grafiken im Internet präsentiert oder für eine andere Form der Online-Präsentation verwendet: Die Dateien sollten möglichst klein sein. Wenn es um Internetdokumente geht, ist diese Forderung sicher sehr leicht nachvollziehbar; schließlich müssen die Daten vor der Darstellung erst einmal über das "Schlüsselloch" Telefonleitung zum Anwender übertragen werden. Aber auch andere Formen von Online-Dokumenten sollten dieses Kriterium erfüllen. Hierbei ist nicht der verfügbare Speicherplatz das eigentliche Problem, sondern die Geschwindigkeit des Bildaufbaus.

Wer schon Print-Dokumente am Rechner gesetzt hat, kennt das Problem aus eigener Erfahrung. Je nach verwendeter Software, dem gewählten Grafikformat und dem geplanten Druckverfahren benötigt der PC für die Anzeige eine gewisse Zeit bis die Grafiken auf dem Bildschirm dargestellt werden.

Grafikformate und Einsatzgebiete

Für den Online-Einsatz sind zwei Kriterien bei Grafikdateien entscheidend:

1. Wie stark können die Dateien komprimiert werden?
2. Treten Verluste bei der Kompression auf?

Momentan schießen neue Grafikformate und Kompressionsalgorithmen wie Pilze aus dem Boden. Der Einsatz dieser – teilweise hervorragenden Formate – scheitert aber daran, dass die verwendeten Anzeigeprogramme (wie z. B. die Internet-Browser) die Grafiken nicht oder nur durch die Verwendung von zusätzlicher Software darstellen können.

Deshalb ist vom Einsatz solch exotischer Formate bei Internetdokumenten grundsätzlich abzuraten. Bei Online-Dokumenten, die dem Anwender z. B. auf CD-ROM angeboten werden, sollten der eigentlichen Präsentation auch die zusätzlichen Programme beiliegen. Ein Hinweis, wo man diese Programme beziehen kann, hilft dem Anwender für den Moment überhaupt nicht weiter und lässt ihn wahrscheinlich auch sehr unzufrieden sein.

Zwei Grafikformate haben sich für den Online-Einsatz etabliert und auf diese Formate wird im weiteren auch genauer eingegangen:

Allerdings sollte man bei JPEG-Bildern beachten, dass ein hoher Kompressionsfaktor auch einen großen Qualitätsverlust bedeutet. Ein sinnvoller Faktor hängt von der Ausgangsgrafik und der gewünschten Qualität ab.

Original Windows-Bitmap-Grafik

gleiche Datei im JPEG-Format mit maximaler Kompression

Erstellen und Anpassen von Grafiken

Im Gegensatz zu gedruckten Dokumenten werden Grafiken am Bildschirm mit einer erheblich geringeren Auflösung dargestellt. Im Druckbereich betragen die üblichen Auflösungen 600 bis 4800 Punkte pro Zoll (dpi = dots per inch), im Online-Bereich muss man (bei einer Auflösung von 800 x 600 Punkten) mit 96 dpi auskommen (je höher die Bildschirmauflösung, desto größer ist auch die Auflösung der Grafiken! ).

Das Problem, das daraus resultiert, ist ein unerwünschter Treppeneffekt bei der Darstellung auf dem Bildschirm.

  
Bild mit einer Auflösung von 96 dpi ( 200 % und 100 %)

Diese Treppeneffekte kann man vermeiden, wenn harte Farbübergänge durch das Einfügen von Zwischentönen geglättet werden. Dieses Verfahren wird als Anti-Aliasing bezeichnet.

  
Farbübergänge geglättet (Anti-Aliasing, 200 % und 100 %)

Grafiken aus Vektorgrafikprogrammen

Grafiken, die in einem Vektorgrafikprogramm erstellt wurden, müssen dann in das gewünschte Grafikformat exportiert werden. Beim Export sind drei Punkte zu beachten:

1. Größe der Grafik: genaue Abmessungen der Grafik angeben, mit denen sie in das Dokument eingebunden wird
2. Auflösung der exportierten Grafik: 96 dpi
3. Anti-Aliasing-Option einschalten.

Export einer Grafik aus CorelDraw 7.0

Je nach verwendetem Grafikprogramm fallen die Ergebnisse des Exports sehr unterschiedlich aus und das Anti-Aliasing ist bei genauerer Betrachtung nicht immer zufriedenstellend.

Deshalb ist es häufig notwendig, diese Grafiken mit einer Bildbearbeitung zu überarbeiten. Der in jeder Bildbearbeitung implementierte Filter "Weichzeichnen" verstärkt diesen Anti-Aliasing-Effekt zusätzlich.

Weichzeichnen einer Grafik in Photoshop 4

Vorhandene Bitmaps bearbeiten

Es ist natürlich auch möglich, dass Grafiken bereits als Bitmap-Dateien (z. B. im TIFF-Format) vorliegen. Auch diese Grafiken sind dann noch für ihre Verwendung in einem Online-Dokument nachzubearbeiten. Folgende Schritte sind notwendig:

1. Anpassen der Abmessungen
2. Anti-Aliasing-Option einschalten
3. Anpassen der Auflösung auf 96 dpi.

Neuberechnung einer Grafik in Photoshop 4 (Originalauflösung 600 dpi)

Auch hier gilt, dass die Anti-Aliasing-Funktion nicht immer zum gewünschten Ergebnis führt. Aber wie auch bei der Nachbearbeitung im Fall der exportierten Vektorgrafiken, können die in Abmessungen und Auflösung angepassten Grafiken zusätzlich weichgezeichnet werden.

GIF-Bilder und Transparenz

Bei GIF-Bildern gilt es, eine weitere Besonderheit zu beachten: Das GIF-Format lässt die Definition einer transparenten Farbe zu. Wenn dieses Bild in ein Dokument, wie z. B. eine Internetseite, eingebunden wird, bleibt der Hintergrund des Dokumentes in den Bereichen der Transparenzfarbe sichtbar.

Aus diesem Grund ist es wichtig, die Grafiken immer für den Hintergrund zu optimieren, auf dem sie publiziert werden sollen. Mit anderen Worten: Die als transparent gesetzte Farbe muss identisch mit der Farbe des Dokumentenhintergrundes sein. Ansonsten kommt es zum sogenannten Halo-Effekt.

Die folgende Grafik  wurde für einen weißen Hintergrund optimiert, aber vor einen grauen Hintergrund gestellt.

Halo-Effekt

Dateigrößen reduzieren

Besonders für Internet-Publikationen ist es wichtig, die Dateigrößen der Grafiken klein zu halten, um ein schnelles Laden der Seiten zu gewährleisten. Untersuchungen haben gezeigt, dass ein vor dem Rechner sitzender Anwender nach etwa fünf Sekunden (!) bereits die Geduld verliert.

Die erste Möglichkeit ist, die Abmessungen der Bilder so zu wählen, dass sie 1:1 in das HTML-Dokument übernommen werden können.

Außerdem kommen viele Bilder mit einer geringen Farbtiefe aus. Alle gängigen Bildbearbeitungen bieten die Möglichkeit, die Anzahl der verwendeten Farben zu reduzieren. Allerdings nützt es nichts, die Farbtiefe eines JPEG-Bildes von 24 Bit (16,7 Mio. Farben) auf 8 Bit (256 Farben) zu reduzieren, aber die Datei im gleichen Format zu speichern. Das JPEG-Format speichert die Datei in jedem Fall mit einer Farbtiefe von 24 Bit. In diesem Fall muss dann auch auf ein anderes Dateiformat (GIF) gewechselt werden.

Das Basteln der optimalen Grafiken für Online-Dokumente erfordert zwar einen nicht immer unerheblichen Aufwand, erfreut aber den Anwender, wenn er ein schnelles und am Bildschirm gut dargestelltes Online-Dokument nutzen kann.

Checkliste "Online-Grafiken"