Atemberaubende Fotos zu schießen ist das eine, diese Bilder anschließend aber auch optimal für das Web zu optimieren, das andere. Was nützt euch schließlich ein aufwändig produziertes Bild, welches final auf Webseite oder Social Network nach wirklich minderer Qualität aussieht? Fotos sollten für die Darstellung im Internet zwar komprimiert werden, dennoch muss hier der Spagat zwischen optimaler Bildqualität und geringer Bildgröße gelingen. Es folgen hilfreiche Praxistipps und anschauliche Video-Tutorials, damit ihr euren Fotos für das Web etwas Gutes tun könnt.
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.
„Ein gutes Foto ist ein Foto, auf das man länger als eine Sekunde schaut.“
Henri Cartier-Bresson
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.
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 fünf, im „Für Web und Geräte speichern“-Dialog auswählbaren Formate geben:
- 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.
- 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.
- 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.
- 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
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.
Die Auflösung der Fotos verkleinern oder nicht?
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 folgenden Video erklärt übrigens Alexander Heinrichs, 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:
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. Das nachfolgende Tutorial von Video2Brain veranschaulicht auf verständliche Weise, wie sich die einzelnen Einstellmöglichkeiten auf das Ergebnis der Komprimierung auswirken.
http://www.youtube.com/watch?v=6h76ygey8j8
Youtube-Direktlink
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.
Fotos für das Web zusätzlich nachschärfen
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.
4 Kommentare
Hallo Herr Trummer,
Ihr Beitrag zum Nachschärfen von Bildern für das web war sehr hilfreich für mich.
Frage:
Ist es unbedingt erforderlich, die Hintergrundebene zu duplizieren?
Oder kann man das Bild direkt unscharf maskieren und dann schärfen?
Vielen Dank für Ihr Bemühen.
Mit freundlichen Grüßen
H. Purschke
Hallo Herr Purschke,
das Duplizieren ist schon notwendig, da damit ja nur eine, sagen wir mal, Filterebene, erzeugt wird, die dann über dem normalen Bild liegt. Mit dieser Vorgehensweise kann im Nachhinein auch noch einmal die Stärke des Schärfens durch Senkung der Deckkraft reguliert werden und der Smartfilter kann nachträglich noch bearbeitet werden. Auch als zusätzliche Sicherheit ist eine duplizierte Ebene nie von Nachteil.
Beste Grüße, Thomas Trummer
Welche große bzw. bteite sollen die Foto’s stand heute haben. Auflösung, breite bei 20zoll usw haben.
Vielleicht können sie mir paar Tipps geben, würde mich sehr freuen.
VG
Hallo Michael, diese Frage ist pauschal so nur sehr schwer zu beantworten. Bei Bildern im Netz und deren Größe kommt es vor allem auf den Einsatzzweck an und auch darauf, was der Seitenbetreiber mit diesen Bildern beim User bewirken will. Ein Fotograf, der neue Kunden durch Bilder in hoher Qualität überzeugen will, wird natürlich zunächst auch Bilder in der maximal möglichen Breite bei Flickr (derzeit 2.048 px) und anderen Bilddiensten hochladen und im Gegenzug etwas längere Ladezeiten in Kauf nehmen. Hingegen wird ein News-Blog, der viele Bilder in seinen Artikeln unterbringen will, eher kleinere Formate wählen, um die Ladezeiten der Bilder zu verkürzen. Auch Betreiber von Onlineshops gehen nicht immer gleich in die Vollen und stellen die maximal mögliche Bildgröße ein. Gerade durch eine stark ansteigende mobile Nutzung hat das Responsive Design und damit die gute Skalierbarkeit von Webseiten einen immer höheren Stellenwert eingenommen, wie diese top-aktuelle Übersicht über die am weitesten verbreiteten Bildformate von mywebcheck.de zeigt. Gängige Bildgrößen, die gut skalierbar sind, findest du bei Pixelz. Solltest du auf der Suche nach den optimalen Bildgrößen von Fotos für die sozialen Netzwerke sein, hilft dir sicher dieser aktuelle Artikel der Jobbörse für Social Media Manager weiter. Bei der Auflösung für die Bildschirmdarstellung sind 72 dpi Standard.
Viele Grüße, Thomas