Bilder für das Web optimieren und komprimieren

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.

Dieser Satz des großen französischen Fotografen Henri Cartier-Bresson hat heutzutage mehr Bedeutung als je zuvor. Wie schicke und vor allem interessante Fotos gemacht werden, muss sich wohl jeder Fotograf selbst aneignen. Wie ihr aber nun eure Bilder Web-gerecht abspeichern könnt, möchte ich euch heute zeigen. Hierbei werde ich euch einen kleinen Überblick über die gängigsten Bildformate und deren Einsatzzwecke geben. Ich werde euch zeigen, wie ihr die Fotos mithilfe von Adobe Photoshop richtig komprimieren könnt und wie ihr eure Bilder nach dem Komprimieren noch ein wenig nachschärfen könnt, denn beim Runterrechnen werden die Bilder meist ein klein wenig unscharf.

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.

Wenn ihr nun Bilder für das Web optimieren wollt, müsst ihr natürlich eure Fotos im RBG-Farbmodus vorliegen haben. Da Monitore und mobile Devices nur den sRGB-Farbraum unterstützen, solltet ihr vor dem Speichern noch einmal überprüfen, ob dieses Farbprofil in Photoshop eingestellt ist. Dazu geht ihr auf Bearbeiten / In Profil umwandeln. Dort seht ihr oben, welches Profil aktuell eurem Bild zugewiesen ist. Sollte es nicht der sRGB-Farbraum sein, so müsst ihr den Haken bei RGB setzen und dort im Dropdown-Menü „RGB-Arbeitsfarbraum sRGB IEC61966-2.1“ auswählen.

Wollt ihr euer optimiertes Bild später nicht nur für die Webausgabe, sondern auch für eine Druckausgabe speichern, so solltet ihr eine Kopie des Bildes für den Druckprozess erstellen. Die kopierte, unter einem anderen Namen abgespeicherte Datei (Umschalt+Strg+S) könnt ihr danach auch für die Darstellung im Netz verkleinern. Aber eigentlich ist das Verkleinern nicht unbedingt von Hand notwendig, da eure Fotos ja später auch im „Für Web und Geräte speichern“-Dialog nochmal verkleinert werden können. Wenn ihr euer Foto trotzdem schon vorher verkleinern wollt, dann findet ihr den Dialog für das Komprimieren der Bildgröße unter Bild / Bildgröße. Im Video von Alexander Heinrichs wird erklärt, was man im Detail bei der Speicherung der Fotos in Bezug auf Bildgröße und Auflösung beachten sollte. Auch wenn in diesem Clip bereits mit Photoshop CC gearbeitet wird, sind die hier gegebenen Informationen auch für die Vorgängerversionen gültig.

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.

Da beim Speichern natürlich nun bei der Reduktion der Bildgröße mehrere Pixel zu einem Bildpunkt zusammengefasst werden, kann es sein, dass euer Bild nach dem Komprimieren für das Internet etwas unscharf wirkt. Ihr habt nun die Möglichkeit, das Foto noch einmal nachzuschärfen. Hierzu könnt ihr entweder mein Tutorial zum Schärfen in Photoshop ansehen oder ihr schärft mit dem Hochpass-Filter nach. Dupliziert hierfür zunächst die Hintergrundebene eures Fotos über Ebene / Ebene duplizieren (Strg+J) und geht dann, damit ihr euren Filter auch nachträglich immer noch anpassen könnt, auf Filter / Für Smartfilter konvertieren. Nun geht ihr für die kopierte Ebene auf Filter / Sonstige Filter / Hochpass. Hier stellt ihr einen Wert zwischen 0,3 und 1,0 ein. Ich habe mich bei diesem doch etwas diffus wirkenden Bild für 1,0 entschieden, aber eigentlich sollten Werte um 0,4 völlig ausreichend sein. Bitte passt auf, dass ihr euer Foto nicht mit zu hohen Werten überschärft. Wenn ihr merkt, dass ihr es doch etwas übertrieben habt, so könnt ihr dank des Smartfilters den Wert wieder etwas reduzieren, in dem ihr doppelt auf den Filter Hochpass klickt und dann den neuen Wert einstellt, oder aber ihr senkt einfach die Deckkraft der Hochpass-Ebene. Zum Schluss dieses Prozesses ändert ihr noch den Modus der Ebene noch in „Ineinanderkopieren“.

Damit habt ihr nun auch eigentlich schon das wichtigste Handwerkszeug, was es braucht, um Bilder in einer guten Qualität und in einer vertretbaren Dateigröße für das Internet zu speichern. Kleiner Hinweis noch zum Schluss: Wenn ihr Fotos für die Social Media-Kanäle komprimieren wollt, dann setzt die Qualität lieber etwas höher an, weil die Plattformen, insbesondere Facebook, bei den täglich anfallenden, gigantischen Datenmengen die Bilder einfach nochmal herunterrechnen müssen. Hier solltet ihr eure Bilder also lieber nicht zu klein machen und die Qualität möglichst hoch ansetzen (optimal sind für JPEGs 95 %). Am besten fahrt ihr hier natürlich mit PNG-24, denn dieses Format wird, wie schon gesagt, nicht komprimiert und auch Facebook setzt hier keine nachträgliche Komprimierung an.