Bilder und Grafiken für das WEB optimieren Einführung Häufig werden für die Homepage gescannte Vorlagen oder Bilder von der Digitalkamera verwendet. Diese müssen zum Veröffentlichen im Web zuerst optimiert werden, da sie in zu hoher Qualität und Dateigröße vorliegen. Für die Übertragung via Internet und für die Anzeige der Fotos am Bildschirm versucht man die Downloadzeiten möglichst kurz zu halten, wobei trotzdem eine möglichst gute Qualität erhalten bleiben soll. Grafikformate Zwei Grafikformate haben sich im Internet durchgesetzt: Format Dateierweiterung gut geeignet für Farbtiefe JPEG *.jpg Graustufen- und Farbbilder aller Farbtiefen bis 32 Bit GIF *.gif Logos, Schaltflächen, Cliparts 8 Bit Bildbearbeitungsprogramme Bilder und Grafiken werden mit Bildbearbeitungsprogrammen optimiert. Ein einfaches Bildbearbeitungsprogramm ist der Photo-Editor von Microsoft, der im Office-Paket enthalten ist, aber unter Umständen nachinstalliert werden muss. Weitere Bildbearbeitungsprogramme mit den entsprechenden Links: Programm Programmtyp Anmerkungen, Links IrfanView Freeware www.irfanview.de Gimp Freeware www.gimp.de Paint Shop Pro 8 Kommerzielles Programm www.jasc.de Adobe Photoshop Elements Kommerzielles Programm www.adobe.de Adobe Photoshop 7.0 Kommerzielles Programm www.adobe.de Microsoft Photo-Editor Kommerzielles Programm Teil des Office-Pakets Bilder und Grafiken für das WEB optimieren Seite 2
Optimieren eines Fotos für den Internet-Einsatz In der folgenden Anleitung wird der Optimierungsweg eines Bildes ab dem Import in den PC bis zur fertigen webtauglichen Datei mit zwei verschiedenen Programmen beschrieben. Bildoptimierung mit Photo-Editor Starte den Microsoft Photo-Editor. Lade mit Datei/Öffnen das Bild. Bildausschnitt erstellen: Klicke die auf die Schaltfläche Markieren und ziehe mit gedrückter linker Maustaste einen Rahmen um den gewünschten Bildausschnitt auf. Dann schneide mit Bild/Zuschneiden/OK das Bild auf die voreingestellte Größe zu. Passe Helligkeit und Kontrast mit Bild/Ausgleichung bei Bedarf an. Bilder und Grafiken für das WEB optimieren Seite 3
Effekte kannst du mit dem Menüpunkt Effekte hinzufügen. Bildauflösung an den Internet-Einsatz anpassen: Mit Datei/Eigenschaften reduzierst du die Bildauflösung auf 72 dpi. Bildauflösung eintragen Stelle die Darstellungsgröße des Bildes am Bildschirm auf 100%, um die tatsächliche Darstellungsgröße am Bildschirm beurteilen zu können. Pixelgröße einstellen: Mit Bild/Größe ändern stellst du das Bild auf die tatsächliche Größe ein. Wenn wir von ein einer Bildschirmauflösung von 800 x 600 Pixel ausgehen, würde das Bild mit einer Pixelgröße von 400 x 300 Pixel ein Viertel der Webseite beanspruchen. Pixelanzahl eintragen Bilder und Grafiken für das WEB optimieren Seite 4
Nun kann das Bild gespeichert werden. Für den Einsatz im Web wählst du das JPEG- Format aus. Um eine webgerechte Dateigröße zu erzielen, komprimierst du das Bild noch ein wenig. Dabei kommt es auf den richtigen Kompromiss zwischen gerade noch akzeptabler Bildqualität und geringer Dateigröße an. JPEG-Dateiformat einstellen Qualitätsfaktor 70 einstellen Beim Speichern nur den Dateinamen und keine Dateierweiterung dazuschreiben! Das Programm erledigt das für dich. Fertig! Bilder und Grafiken für das WEB optimieren Seite 5
Bildoptimierung mit IrfanView Starte das Programm IrfanView. Beim ersten Programmstart solltest du mit Options/Properties/Language die Sprache auf Deutsch umstellen. Das ist nur einmal notwendig. Lade mit Datei/Öffnen das Bild. Das Bild wird nun wahrscheinlich zu groß erscheinen. Mit dem Lupensymbol kannst du die Darstellungsgröße am Bildschirm verändern. Passe Helligkeit, Kontrast und eventuell vorhandene Farbstiche mit Bild/Farben ändern an. Nach erfolgter Einstellung mit OK bestätigen. Effekte kannst du mit dem Menüpunkt Bild/Effekte hinzufügen. Bilder und Grafiken für das WEB optimieren Seite 6
Bildauflösung an den Internet-Einsatz anpassen: Mit Bild/Größe ändern reduzierst du die Bildauflösung 72 dpi und die Pixelgröße auf das gewünschte Maß. Wenn wir von einer Bildschirmauflösung von 800 x 600 Pixel ausgehen, würde das Bild mit einer Pixelgröße von 400 x 300 Pixel ca. ein Viertel der Webseite beanspruchen. Pixelgröße einstellen Auflösung einstellen Bilder und Grafiken für das WEB optimieren Seite 7
Nun kannst du das Bild speichern. Für den Einsatz im Web wählst du das JPEG-Format aus. Um eine webgerechte Dateigröße zu erzielen, komprimierst du das Bild noch ein wenig. Dabei kommt es auf den richtigen Kompromiss zwischen gerade noch akzeptabler Bildqualität und geringer Dateigröße an. Qualitätsfaktor 70 einstellen JPEG-Dateiformat einstellen Beim Speichern nur den Dateinamen und keine Dateierweiterung dazuschreiben! Das Programm erledigt das für dich. Fertig! Das Bild kann nun mit einem HTML-Editor auf der Webseite platziert werden. Sollte die Größe auf der Webseite nicht entsprechen, öffnest du das Bild wieder in einem der Bildbearbeitungsprogramme und änderst dort die Pixelanzahl auf das gewünschte Maß. Da die Programme Photo Editor und IrfanView keine Vorschaufunktion beim Speichern im JPEG-Format besitzt, ist es schwer, den richtigen Qualitätsfaktor zu erwischen. Hierfür bietet sich ein kleines Zusatzprogramm, der JPEG-Optimizer, an. Bilder und Grafiken für das WEB optimieren Seite 8
Bildoptimierung mit dem Starte den JPEG-Optimizer. Lade mit File/Open das zuvor im Bildbearbeitungsprogramm bearbeitete Bild. Es erscheinen zwei Bildfenster, wobei jenes mit der Prozentanzeige in der Titelleiste die komprimierte Variante ist. Um die Fenster untereinander anzuordnen, klickst du auf Window/Tile. Bild speichern Qualitätsfaktor einstellen komprimiertes Bild Mit dem Schieberegler kannst du nun den Qualitätsfaktor einstellen und gleichzeitig im oberen Fenster die Qualität und die Dateigröße des Bildes kontrollieren. Sobald eine möglichst kleine Dateigröße bei noch akzeptabler Bildqualität erreicht ist, kannst du das Bild erneut, diesmal unter einem anderen Dateinamen, speichern. Bilder und Grafiken für das WEB optimieren Seite 9