Wenn euch ein wirklich bezauberndes Foto gelungen ist, dann wollt ihr dies der Netzgemeinde natürlich nicht vorenthalten. Plattformen wie Flickr, 500px, Behance und auch soziale Netzwerke wie Facebook und Google+ eignen sich hierfür natürlich hervorragend. Wie aber lassen sich die Bilder nun für das Web optimieren, damit diese ansprechend präsentiert werden und nicht in der heutigen Bilderflut untergehen? Neben dem Shooting eines Fotos ist die richtige Nachbearbeitung nämlich mindestens genauso wichtig.
Die Dateiformate für Bilder im Web
Um euch nun einmal die unterschiedlichen Dateiformate zu zeigen, öffnet ihr euch euer Bild in Adobe Photoshop über den Menüpunkt Datei / Öffnen. Ich habe mir dieses Möwenfoto (© Davide Ragusa, Flickr.com) hier von unsplash.com heruntergeladen. Auf dieser Seite bekommt ihr eine Zusammenstellung wirklich hochwertiger und vor allem lizenzfreier Bilder zum kostenlosen Download. Wenn ihr immer über die neuesten Bilder informiert werden wollt, braucht ihr euch dort nur für den wöchentlichen Newsletter einzutragen. Aber nun back-on-topic: Um eure Bilder für das Web optimieren und speichern zu können, müsst ihr in Photoshop auf Datei / Für Web und Geräte speichern gehen. Ich habe dort für euch mal oben links die Option 4-fach aktiviert und für jedes dieser vier Fenster mal ein anderes Dateiformat ausgewählt. Ihr seht schon, dass GIF, JEPG und PNG die gängigsten Formate sind. Aber zwischen diesen drei Formaten gibt es große Unterschiede, vor allem in dem Einstellmöglichkeiten, in der Komprimierung der Fotos und natürlich in der Dateigröße der Ausgabe. Letzteres ist bei den überwiegend guten Uploadgeschwindigkeiten nicht mehr ganz so entscheidend, aber für den Download auf Userseite kann es hilfreich sein, kleine und trotzdem qualitativ hochwertige Dateien anzubieten, um zu hohe Wartezeiten zu vermeiden.
Aber wofür könnt ihr nun welches Dateiformat anwenden? Um euch eine kleine Entscheidungshilfe mit an die Hand zu geben, will ich hier einen kurzen Überblick über die Eigenschaften der im „Für Web und Geräte speichern“-Dialog auswählbaren Formate geben:
- PNG: Vom Format Portable Network Graphics (PNG) gibt es zwei verschiedene Ausführungen. PNG-8 ist in etwa mit dem GIF-Format vergleichbar. Es unterstützt 1-Bit-Transparenz und begrenzt die Farbpalette auf 256 Werte, weshalb es aufgrund seiner zum GIF-Format gleichen Eigenschaften natürlich auch die gleichen Nachteile mit sich bringt. Der einzige wirkliche Unterschied dazu ist allerdings, dass mit PNG-8 keine animierten Fotos abgespeichert werden können. Das Format, das die höchste Qualität bietet, ist PNG-24. Es ist komplett verlustfrei und es unterstütz 8-Bit-Transparenz. Klingt auf den ersten Blick richtig gut. Der große Nachteil liegt natürlich in der großen Dateigröße, die für das Speichern im Internet natürlich nicht immer gut ist. Aber ihr könnt davon ausgehen, dass eure Grafik, so wie ihr sie als PSD-Datei in Photoshop angezeigt bekommt, am Ende auch in der abgespeicherten PNG-24 im Internet erscheint. Die großen Dateien und die Tatsache, dass PNG nicht von allen, vor allem nicht von älteren Browsern, verarbeitet werden kann, sind leider zwei Gründe dafür, dass es sich gegen JPEG nicht so richtig durchsetzen kann.
- JPEG: Beim Kompressionsverfahren der Joint Photographic Experts Group (JPEG) gibt es einige entscheidende Unterschiede zum Abspeichern von GIFs und PNGs. Der Hauptunterschied besteht darin, dass beim Speichern von JPEG-Bildern für das Internet Verluste auftreten können. Dabei wird natürlich die Qualität des Bildes verringert. Wenn man allerdings vorsichtig mit diesem Verfahren umgeht, sind die Verluste kaum sichtbar und man kann damit jede Menge Speicherplatz einsparen. Weiterer Vorteil von JPEGs: Mit ihnen lassen sich Metadaten einbetten, was für Copyright-Vermerke und andere Informationen zum Bild natürlich von Vorteil ist. Daher hat es sich einfach als Standardformat für Fotos und andere komplexe Bildkompositionen, die ihr für das Web optimieren wollt, herauskristallisiert.
- GIF: Das Graphic Interchange Format (GIF) ist sehr gut zum Speichern von Logos, Text und eben der coolen, animierten Bilder geeignet. Für dieses Format werden die Grafiken verlustfrei komprimiert, was bedeutet, dass sie später in der höchstmöglichen Qualität vorliegen. Das größte Problem beim GIF-Format ist allerdings, dass es nur das Speichern von 256 Farbtönen erlaubt. Für Fotos ist dieses Format damit völlig ungeeignet. Für vollflächige Darstellungen, also zum Beispiel Logos mit wenigen Farben, ist dieses Format hingegen perfekt geeignet.
- WBMP: Wireless Bitmap Files (WBMP) sind eigentlich nur für den Einsatz auf mobilen Endgeräten entwickelt wurden. Gut, so etwas gibt es heutzutage maximal noch auf ein paar E-Book-Readern, aber Dateien dafür werden ja nicht mit Photoshop erstellt. Ihr werdet dieses Format also höchstwahrscheinlich nie verwenden.
Fotos für das Web in den sRGB-Farbraum konvertieren
Die Auflösung der Fotos verkleinern oder nicht?
Bilder für das Web optimal optimieren
Kommen wir nun zum wichtigsten Step, der Optimierung eurer Bilder für das Web. Ihr geht also auf den Menüpunkt Datei / Für Web und Geräte speichern. Hier könnt ihr nun alle Einstellungen vornehmen, damit eure Fotos bei der für euren Einsatzzweck optimalen Qualität mit der minimalen Dateigröße ausgegeben werden.
Kleiner Tipp noch: Für einen schnelleren Wechsel zwischen den einzelnen Werkzeugen könnt ihr natürlich auch die gewohnten Shortcuts auf eurer Tastatur verwenden: H für das Hand-Werkzeug, C für das Slice-Werkzeug, Z für das Zoom-Werkzeug und I für die Pipette.