Nach Aufspaltung des digitalen globalen Computernetzwerks in einen öffentlich zugänglichen Bereich (Internet – Interconnected Networks) und einen militärischen Bereich (Milnet) in den 80'er Jahren des vergangenen Jahrhunderts, war auch recht bald der Wunsch vorhanden, nicht nur Texte, sondern auch Grafiken darstellen zu können. Es entstand das World Wide Web, einer der Dienste des Internets, der heutzutage als das Internet bezeichnet wird. Über bestimmte HTML-Befehle (sog. TAGGS) ist es möglich jegliche Art von Mediendatei, ob Musik, Videos oder Fotos in Dateien einzubinden und so einem Millionenpublikum näherbringen zu können.
Probleme bereiten dabei in erster Linie nicht die unterschiedlichen Rechnerkonfigurationen oder Betriebssysteme, als vielmehr die Übertragungsgeschwindigkeit der Dateien. Wer nicht über eine Standleitung mit dem Internet verbunden ist, muss sich normalerweise über die herkömmliche Telefonleitung einwählen. Bei einer mittleren Übertragungsgeschwindigkeit einer ISDN-Leitung werden etwa 5 KB pro Sekunde übertragen, analoge Modems haben i.d.R. noch wesentlich geringere Bandbreiten. Hier kann man sich leicht ausrechnen wie lange es dauert, bis ein Bild auf dem Monitor des Surfers dargestellt wird. Um einen guten Kompromiss zwischen Darstellung des Bildes und Übertragungsgeschwindigkeit zu erreichen, müssen die Bilder bevor sie auf den Server übertragen werden optimiert werden.
Auch wenn heutzutage Breibandverbindungen ins Internet immer günstiger werden und die Verbindungsgeschwindigkeiten weiter steigen, gibt es immer noch viele User, die über eine Modemeinwahlverbindung surfen. Aber auch geschwindigkeitsverwöhnte Poweruser warten nicht gerne darauf bis sich die Seiten aufgebaut haben.
Dateiformate
Während es im Bereich der Bildbearbeitung sehr viele verschiedene Dateiformate gibt, sind fürs WEB gerade einmal 3 Dateiformate nutzbar.
GIF
Von dem Online-Anbieter Compuserve wurde das GIF-Format (Graphics Interchange Format) entwickelt um Grafiken im Internet darstellen zu können. Im Interlaced-Modus werden die Bilder nicht zeilenweise aufgebaut, sondern schichtweise, was dazu führt, dass das Bild sehr schnell (wenn auch in einer geringeren Auflösung) zu sehen ist. Schichtweise wird das Bild weiter aufgebaut, bis das Qualitätsmaximum erreicht ist.
Dieses Dateiformat bietet gegenüber den anderen Dateiformaten zwei wesentliche Vorteile - man kann eine der Bildfarben als transparente Farbe definieren um den Hintergrund durchscheinen zu lassen, zum anderen lassen sich im GIF-Format mehrere Bilder in einer Datei speichern, was man zur Erstellung s.g. animated GIFs, einer Art elektronischem "Daumenkino", nutzen kann.
Diesen Vorteilen steht der Nachteil entgegen, dass im GIF-Format lediglich 256 Farben (8 Bit) dargestellt werden können. Ausreichend für eine normale Grafik oder ein monochromes Bild – nicht jedoch für eine detailreiche Grafik oder für Fotos.
Das Haupteinsatzgebiet dieser GIF's liegt deshalb auch mehr im grafischen Bereich wie z.B. bei der Gestaltung von Schaltflächen etc.
JPEG
Dieses Dateiformat wurde extra für das Internet von der Joint Photografers Expert Group zur Darstellung von Fotos im WEB entwickelt.
Im Gegensatz zum GIF-Format kann das JPEG – Format (Dos-Erweiterung: jpg) Farben bis 24 Bit = 16,7 Millionen Farben darstellen und eignet sich deshalb besonders gut für Fotos und detailreiche Farbverläufe.
Transparente Bereiche oder Animationen können im JPEG-Format hingegen nicht dargestellt werden – dies bleibt dem GIF-Format vorenthalten.
Beim Abspeichern im JPEG-Format wird eine regelbare Kompression eingesetzt, was zu relativ kleinen Dateien führen kann. Da diese Kompression jedoch einen Verlust an Qualität nach sich zieht, darf die eingestellte Kompression wiederum nicht zu hoch gewählt werden.
Um den Qualitätsverlust zu vermeiden, hat die JPEG-Gruppe ein neues JPEG-Dateiformat (JPG2000) entwickelt. Vereinzelte Softwarehersteller bieten bereits PhotoShop-Plugins für das neue Dateiformat an. Bis das neue Dateiformat breite Unterstützung sowohl der Bildverarbeitungsprogramme als auch der Browser erfährt, wird wohl noch einige Zeit ins Land gehen.
PNG
Das PNG – Dateiformat (Portable Network Graphic) wurde entwickelt um die Vorteile der GIF- und JPEG-Formate zu verbinden. PNG unterstützt sowohl transparente Bereiche als auch eine hohe Farbtiefe. Die Dateien werden beim Speichern verlustfrei komprimiert.
Dies wäre eigentlich das ideale Dateiformat, leider unterstützen nicht alle Browser dieses Dateien.
Bilder fürs WEB optimieren
Wie bereits weiter oben erwähnt, stehen den meisten Surfern sehr geringe Übertragungsgeschwindigkeiten zur Verfügung. Dauert das Laden eines Bildes zu lange kostet es nicht nur Zeit, sondern auch Geld (Telefongebühren), was viele Surfer dazu bewegt, schleunigst das Weite zu suchen.
Aus diesem Grund sollte man die Dateigröße – zumindest für ein Vorschaubild – möglichst gering halten und ein größeres Bild als Link bereithalten, das der Surfer explizit selbst auswählen kann. Als Vorschaubild hat sich eine Größe von 300 x 200 Pixel als durchaus brauchbarer Kompromiss herausgestellt. Da die Bilder lediglich auf dem Computermonitor dargestellt werden, genügt eine Auflösung von 72 bis 120 lpi. Sofern es die Bilder erlauben, kann man auch noch die Farbtiefe eventuell auf 16 Bit (65536 Farben) oder 15 Bit (32768 Farben) reduzieren, was noch weiteres Sparpotential beinhaltet.
Vorgehensweisen
Jedes moderne Bildverarbeitungsprogramm bietet heute die Möglichkeit Bilder fürs Internet zu optimieren. Beispielhaft ist die Vorgehensweise unter ADOBE Photoshop CS2, COREL PhotoPaint 12.0 und Gimp 2.0 beschrieben. Bei Auswahl der Software sollte man darauf achten, dass der Kompressionsfaktor frei wählbar ist und dass das Programm eine Vorschau auf das zu erwartende Resultat liefert.
PhotoShop
1) Nach Scannen oder Einlesen des Bildes von einer Photo-CD ist das Bild zunächst einmal in die richtige Größe zu bringen.
- Unter dem Menü Bild » Bildgröße wird das Bild angepasst
- die Auflösung ist auf 72 - 100 dpi festzulegen
- die Größe wird mit 300 Pixel Breite abgegeben. Ist das Schaltkästchen "Proportionen erhalten" aktiviert, wird die Bildhöhe automatisch festgelegt. Die Bildberechnung "Bikubisch" bringt bei Fotos die besten Resultate.
Die Bildgröße vorher / nachher läßt sich unter Bildmaße nachlesen
Screenshot:
2) Unter dem Menü Bild » Einstellen können verschiedene Korrekturen am Bild vorgenommen werden. Durch das Einscannen der Bilder geht immer etwas Schärfe verloren, das unter dem Menüpunkt Filter » Scharfzeichnungsfilter » unscharf maskieren ausgeglichen werden kann. So widersprüchlich es sich auch anhört. Die Unscharfmaskierung stammt aus den Zeiten analoger Labortechnik, als mit unscharfen Überlagerungen der Bilder eine Schärfung des Bildes in der Reproduktion erreicht wurde. Die Schärfung sollte in einem Durchgang nicht zu extrem vorgenommen werden (Stärke 100 bis 200 %, Radius 1 bis 2 Pixel) und sollte lieber ggf. wiederholt werden, da sonst die Schärfung zu offensichtlich zutage tritt.
Screenshot:
3) Zum Abschluss ist das Bild als JPEG-Datei abzuspeichern. Unter dem Menü Datei » Für WEB speichern zeigt Photoshop eine Vorschau mehrerer Qualitätsstufen unter Angabe der Dateigröße und der Ladezeit im Verhältnis zur Übertragungsgeschwindigkeit an. Die Qualitätsstufen sind ebenso einstellbar, wie das Dateiformat (GIF, JPEG, PNG) und die angenommene Übertragungsgeschwindigkeit.
Ein Klick auf das entsprechende Vorschaubild mit anschließender Bestätigung speichert das Bild im angegebenen Format ab. Wählt man als Dateityp "Bilder und HTML" wird gleichzeitig auch noch eine HTML-Seite erstellt.
Screenshot:
PhotoPaint
1) Auch hier ist zunächst einmal das vorliegende Bild auf die entsprechende Größe zu bringen.
Unter dem Menü Bild » Bild neu aufbauen werden die entsprechenden Angaben vorgenommen. Zur Vermeidung von Verzerrungen sollte darauf geachtet werden, dass das Kästchen "Seitenverhältnis beibehalten" aktiviert ist.
Screenshot:
2) Unter dem Menü Bild » Anpassen können verschiedene Korrekturen vorgenommen werden, bevor das Bild abschließend unscharf maskiert wird (Menü Effekte » Schärfe » Unscharfmaske)
Die Prozentangaben sollten sich zwischen 100 und 200 % belaufen, der Radius zwischen 1 und 2 Pixel. Falls nötig ist die Unscharfmaskierung zu wiederholen.
Screenshot:
Abschließend ist das Bild als JPEG-Datei zu speichern (Menü Datei » Für das Web exportieren). Nach Eingabe des Dateinamens und des Dateityps erscheint ein Vorschaufenster, in dem man die Parameter für Kompressionsstärke, Glättung sowie Kodierungsverfahren eingeben kann. Ein Klick auf "Vorschau" zeigt im Ergebnisfenster die Auswirkung der gewählten Parameter, sowie unten rechts die neue Dateigröße. Der aktive Kontrollkästchen "Progressiv" bewirkt, dass das Bild in manchen Browsern nach und nach schichtweise aufgebaut wird.
Auch PhotoPaint bietet die Möglichkeit sich zusätzlich zum Bild eine HTML-Seite erstellen zu lassen. Hierzu muß im Auswahldialog nur das entsprechende Kästchen aktiviert werden.
Screenshot:
Gimp
1) Die Bildgröße wird in Gimp über das Menü Bild » Bild skalieren bestimmt. Hier kann auch die Auflösung sowie die Interpolationsmethode festgelegt werden.
Screenshot:
2) Unter dem Menüeintrag "Filter" können verschiedene Bildkorrekturen vorgenommen werden bevor dann unter dem Menüpunkt Filter » Verbessern » Unscharf maskieren das Bild geschärft wird.
Screenshot:
3) Das Bild kann anschließend als JPEG-Datei (GIF oder PNG) unter Datei » speichern unter gespeichert werden. Gimp bietet beim speichern die Besonderheit, daß der Dateityp aus der Dateiendung automatisch erstellt wird.
Screenshot:
