Fotos fürs Web optimieren – unser Workflow

Fotos fürs Web optimieren – wer einen Blog betreibt oder seine Fotos bei Facebook und Co. zeigen möchte, kommt um eine Bearbeitung der Bilder nicht vorbei. Am Ende sollte dann ein Foto stehen, dass den Anforderungen der einzelnen Medien gerecht wird. Dabei sind diese Anforderungen nicht hoch. Vielmehr geht es darum, eine Bilddatei möglichst klein zu bekommen ohne dass es zu (großen) Qualitätsverlusten kommt. Ziel ist es ja, dass die Fotos schnell geladen werden. Und dabei zählt jedes Kilobyte weniger bei der Dateigröße.

Fotos fürs Web optimieren – Workflow

Wir möchten Euch gerne an unserem Workflow zeigen, wie wir unsere Fotos für den Einsatz auf dem Blog und in den Social Medias vorbereiten. Dabei gehen wir kurz auf die Fotografie als Solches ein, zeigen den Import und die Entwicklung der Fotos im Schnelldurchgang bevor wir Euch die verschiedenen Exporte der Fotos für das Web zeigen. Am Ende gehen wir noch kurz auf die Archivierung und Sicherung der Fotodateien ein.

Schritt 1 – Fotografieren

Natürlich wollen Fotos erstmal gemacht werden. Auf die Details dazu gehen wir jetzt nicht weiter ein, da haben wir eine Menge im Fotografie-Bereich drüber gesammelt. Wir möchten nur erklären, dass wir keine Fotos nur für das Netz in einem anderen Modus aufnehmen würden. Wir fotografieren immer im RAW-Format mit voller Auflösung.

Das machen wir auch, wenn wir Fotos bewusst nur für einen Beitrag hier erstellen oder bei anderen, die nur nach Facebook sollen. Uns stehen mit dem großen Dateiformat alle Bildinformationen zur Verfügung, wir haben genug Spielraum um  den Ausschnitt zu verändern und wer weiß, vielleicht ist genau das eine Foto so genial, dass wir es uns doch noch in Groß an die Wand hängen wollen. Und dann wäre es doch ärgerlich, wenn nur eine Version mit wenigen Megapixeln vorhanden ist.

Schritt 2 – Kopieren der Fotos

Zur Auswahl der Fotos müssen diese als erstes von den Speicherkarten auf den Rechner kopiert werden.  Wir lieben ja unser MacBook. Aber eine große Festplatte hat das gute Stück nicht, 500GB SSD sind nicht sooo viel. Daher haben wir für die Rohdaten zur Fotobearbeitung eine externe SSD-Platte mit 1 TB, welche per USB-C am Notebook angeschlossen ist. Damit ist die Bearbeitung der Bilder fast so schnell, wie von der internen Festplatte. Auf das externe Laufwerk kopieren wir die RAW-Daten von der Kamera. Für die SD-Karten haben wir übrigens einen Kartenleser, der ebenfalls per USB-C angeschlossen wird.

Die Daten kopieren wir in Verzeichnisse, die wir später in unsere Archive einfügen können. Der Verzeichnisname besteht im Grund aus dem Datum und eine Beschreibung der Inhalte. Darunter haben wir verschiedene Unterverzeichnisse, die wir aber variieren. In dem Beispiel oben sind es die Fotos pro Kamera. In dem Florida-Verzeichnis dagegen liegen die Fotos nach Tagen sortiert. Wichtig ist für uns nur der Verzeichnisname um die Fotos später im Archiv auch wiederzufinden.

Schritt 3 – Importieren der Fotos nach Lightroom

In Lightroom haben wir einen Katalog, den wir nur für die Bearbeitung der aktuellen Fotos nutzen. In diesen Katalog importieren wir die neuen Fotos aus dem angelegten Verzeichnis auf der externen SSD-Platte.

Direkt beim Import lassen wir die Copyright Informationen in die Metadaten des Fotos schreiben. Dafür haben wir für die erforderlichen Daten eine Vorgabe erstellt. Den Inhalt könnt ihr in dem kleinen Screenshot sehen.

Zusätzlich haben wir für jede unserer Kameras in Import-Preset erstellt. In diesen Presets sind einige Vorgaben gemacht, die wir aus Erfahrung für die Erstentwicklung der RAW immer vornehmen.

• Erhöhung der Klarheit
• Erhöhung der Dynamik
• Standardwerte fürs Schärfen
• Chromatische Aberrationen entfernen
• Objektivkorrekturen

Das sind natürlich nur grobe Vorgaben, die Feinheit erfolgt später in der Entwicklung.

Schritt 4 – Auswahl der Fotos

Nun erfolgt die Auswahl der Fotos, die wir verwenden und entwickeln wollen.

Wir nutzen zur Auswahl die Farbmarkierungen in Lightroom. Alle Fotos, die wir toll finden bekommen also eine farbige Markierung. Je nach geplantem Verwendungszweck nutzen wir auch mal unterschiedliche Farben. Das ist aber eher die Ausnahme, in der Regel kommen wir mit einer Farbe aus.

Bei diesem ersten Schritt wählen wir oft zu viele Bilder aus. Wir haben uns mal die Grenze gesetzt, nicht mehr als 30 Fotos in einen Bericht zu packen. Ok, immer gelingt uns das nicht aber nach einer ersten Auswahl kann es passieren, dass wir 60 oder mehr Fotos markiert haben. Dann sortieren wir diese nochmals aus. Dabei versuchen wir doppelte Motive zu vermeiden und möglichst viel Abwechslung in einen Bericht zu bekommen.

Schritt 5 – Entwicklung/Bearbeitung der Fotos

Im nächsten Schritt bearbeiten wir die Fotos. Das ist auch sicherlich der Schritt, wo wir die meiste Zeit drauf verwenden. Jedes Foto hat seine besonderen Eigenschaften, jeder Bericht hat ein anderes Ziel. Bei Reiseaufnahmen machen wir meist nur eine einfach Entwicklung, da wir ja die Orte so zeigen wollen, wie sie wirklich aussehen. Bei Tierfotos ist die Bearbeitung meistens ein wenig aufwändiger. Da versuchen wir die Tiere in den Vordergrund zu stellen, Hintergründe abzudunkeln, Gesichter zu betonen und noch einiges mehr.

Über das Thema Fotobearbeitung können ganze Blogs gefüllt werden. Ich will darauf hier an der Stelle nicht im Detail eingehen. Wer sich unsere Workflows bei der Bearbeitung mal detaillierter ansehen möchte, der kann das in folgenden Artikeln machen:

• Unser Lightroom Workflow für Tierfotos
• Lightroom Workflow für Spotterfotos
• Alles rund um die Fotobearbeitung

Schritt 6  – Export der Fotos

Jetzt kommen wir endlich zum Kern des Beitrages – das optimieren der Fotos für das Web. Denn das geschieht bei unserem Workflow beim Export der Fotos aus Lightroom. An dieser Stelle nehmen wir die Einstellungen vor, die am Ende zum optimalen Kompromiss zwischen Dateigröße und Qualität des Fotos führt. Dafür haben wir uns verschiedene Export-Einstellungen gespeichert, da jedes Medium andere Anforderungen an die Fotodateien stellt.

Generelle Tipps zum Export von Bildern

Wenn ihr Bilder für das Web erstellt, dann beachtet beim Dateinamen bitte folgende Dinge:

• Nur Kleinbuchstaben im Dateinamen verwenden. Die meisten Server laufen auf Unix-Systemen. Im Gegensatz zu Windows sind dort die Dateien xyz.jpg und XYZ.jpg zwei unterschiedliche Dateien.
• Keine Leerstellen in Dateinamen verwenden. Nutzt stattdessen lieber den Binde- oder den Unterstrich für eine vernünftige Bezeichnung. test_foto.jpg wäre so ein Beispiel. WordPress kann grundsätzlich mit Leerstelle im Dateinamen umgehen. Besser ist es aber immer, wenn ihr bereits vorab alles richtig macht.
• Nutzt um Gottes Willen keine Umlaute oder andere Sonderzeichen in den Dateinamen. ä,ö,ü,ß sind deutsche Schriftzeichen, die haben in Dateinamen (und URLs) meiner Meinung nach nichts zu suchen. Das Internet basiert auf der englischen Sprache und da gibt es diese Zeichen nicht. Natürlich können viele Webserver und Webbrowser damit umgehen. Aber irgendwann fällt Euch das auf die Füße, beim Umzug des Blogs, beim zurückspielen einer Datensicherung.

Export für den Blog

Unser Blog stellt Fotos mit 1000 Pixeln Breite dar, wenn die Monitorauflösung des Besuchers es zulässt. Uns ist dieses recht große Format sehr wichtig. Schliesslich ist das hier ein Blog, wo die Fotografie einen großen Stellenwert hat – da möchten wir unseren Lesern keine Minibilder zeigen. Der Export er Bilder erfolgt mit einer Einstellung, die sicherlich nicht die minimale Dateigröße raus kitzelt. Aber wir möchten die Fotos schon mit einer gewissen Qualität zeigen, ohne Artefakte oder groben Tonwertabrissen.

Folgende Einstellungen nutzen wir in Lightroom für den Export der Fotos für den Blog:

• Speicherort: Wir haben ein Verzeichnis, wo wir unsere Fotos für Bllogbeiträge speichern. Dort lassen wir die Fotos dann in ein Unterverzeichnis pro Blogartikel exportieren.
• Dateiname: Aus SEO-Sicht mach es Sinn, jedem Fotos einen erklärenden Dateinamen zu geben. Zugegeben, das machen wir nicht immer, aber immer öfter.
• Dateieinstellungen: Wir speichern die Fotos als jpg-Dateien und einer Qualität von 50% 40% im Farbraum sRGB.
• Bildgröße: Maximal 1000 Pixeln an der langen Seite, 72 Pixel/Zoll (wobei es vollkommen egal ist, was ihr hier eintragt: https://t3n.de/news/72-dpi-mythos-luege-518017/ und unterdrücken das Vergrößern von Fotos, die kleiner als 1000 Pixel sind (was bei uns fast nie vorkommt).
• Ausgabeschärfe: Für den Bildschirm mit der Stärke Standard
• Metadaten: „Nur Copyright“ – alle anderen Meta- und EXIF-Daten werden nicht in die Datei gespeichert. Das spart ein paar Byte pro Foto ein.
• Wasserzeichen: Da lassen wir unser Logo, halbtransparent, auf jedes Foto in die rechte untere Ecke setzen. Das dient ausschliesslich dem Branding als Foto von unserem Blog. Bilder-Diebstahl lässt sich damit nicht verhindern.

Diese Einstellung produziert Fotodateien zwischen 100 und 300 Kilobyte. Sicherlich geht das noch kleiner, Google schimpft auch dauernd mit uns, dass die Fotos etwas zu groß sind. Wir nehmen das aber in Kauf um die Fotos in einer vernünftigen Qualität zu haben. Wir haben es schon mit kleineren Dateien probiert, man  bekommt Landschaftsfotos auf auf 50 Kilobyte komprimiert. Nur sehen dann z.B. Blauverläufe im Himmel aus wie eine Farbtreppe.

Vor dem Upload lassen wir die Fotos noch einmal durch ein kleines Tool auf dem MacBook laufen. Image-Optim heisst das, und das bringt immer noch ein paar wenige Bytes. Viel ist das nicht, weil die Fotos schon ordentlich aus Lightroom kommen, es läppert sich aber zusammen.

Zusatztip für WordPress: Wordpress und das eingesetzte Theme erzeugen von den hochgeladenen Fotos weitere Versionen, in verschiedenen Bildgrößen. Sei es zur Nutzung als Thumbnails oder für den passenden Einsatz an verschiedenen Stellen des Blogs. Dabei werden die neuen Dateien ebenfalls von WordPress komprimiert. Diese Komprimierung könnt ihr abschalten oder an Eure Bedürfnisse anpassen, wenn ihr folgenden Code in der functions.php Datei Eures Themes hinzufügt:

Code für die functions.php

add_filter(‚jpeg_quality', function($arg) );

add_filter(‚wp_editor_set_quality', function($arg) );

Die 100 in dem Code bedeutet, dass die neuen jpgs nicht  komprimiert werden. Diesen Wert könnt ihr ändern, z.B. auf 90 um eine moderate Komprimierung zu erreichen. Seid vorsichtig wenn ihr Änderungen an der funtions.php vornehmt. Macht bitte vorher eine Sicherungskopie und arbeitet am besten in einem Child-Theme.

Unsere Löwendame sieht dann für den Blog, mit den beschriebenen Einstellungen, so aus:

Titelbilder für den Blog

Unsere Titelbilder werden alle mit einem Farbverlauf am unteren Ende versehen und einer Beschriftung. Da die Beschriftung in Lightroom nicht möglich ist (das wäre noch ein Wunsch an Adobe), nehmen wir eines der exportierten Fotos und bearbeiten das in Photoshop weiter zum Titelbild.

Wir haben uns eine Vorlage erstellt, wo das gewünschte Foto eingefügt werden kann und wir dann nur doch die Texte anpassen müssen.

Den Export machen wir dann mit der Funktion „Für Web speichern…“ aus Photoshop. Dabei wählen wir dann folgende Einstellungen:

• JPG-Datei mit 40% Qualität
• in sRGB konvertieren (wir arbeiten aber sowieso in diesem Farbraum)
• Bildgröße 1000×563 Pixel – bei allen Titelbildern, damit die gleichmäßig groß sind
• Qualität Bikubisch

Dabei entstehen dann jpg-Dateien mit einer Größe zwischen 80 und 150 Kilobyte, die wir dann als Beitragsbild im Artikel verwenden.

Unsere Beispiel-Löwin aus diesem Beitrag könnt ihr oben als Beitragsbild bestaunen.

Export für Facebook / Flickr/ 500px

Wenn wir schnell mal Fotos bei Facebook zeigen wollen, nehmen wir einfach die Variante, die wir für den Blog exportiert haben. Aber gerade bei unseren Tier- und Reisefotos wollen wir auch gerne mal in einer höheren Qualität zeigen. Dafür haben sich folgende Einstellungen sehr bewährt, die wir auch für Fotoplattformen wie Flickr oder 500px verwenden.

• Speicherort: Auch für unsere „High-Quality“-Fotos haben wir ein eigenes Hauptverzeichnis, wo wir die Fotos dann in verschiedene Unterverzeichnisse exportieren.
• Dateiname: Der Dateiname ist für die Verwendung bei Facebook relativ egal. Facebook ändert diesen nach dem Upload sowieso um. Leerzeichen und Sonderzeichen kann man sich aber auch hier verkneifen. Vielleicht braucht man die Fotos noch für andere Zwecke.
• Dateieinstellungen: Wir speichern die Fotos als jpg-Dateien. Dabei begrenzen wir die Fotos auf eine maximale Dateigröße von maximal 990 Kilobyte. Warum – steht unten.
• Bildgröße: Für Facebook exportieren wir die Fotos mit einer Größe von 2048 Pixeln an der langen Seite bei 72 Pixel/Zoll.
• Ausgabeschärfe: Für den Bildschirm mit der Stärke Standard
• Metadaten: An dieser Stelle ist es relativ egal, was ihr einstellt. Bei Facebook werden die Meta-Daten eh gelöscht. Wir lassen die aber alle speichern, weil wir die Fotos mit der hohen Qualität auch noch bei Flickr und Co. benutzen – und da bleiben die erhalten und werden auch von den Programmen ausgelesen und angezeigt.
• Wasserzeichen: Da lassen wir unser Logo, halbtransparent, auf jedes Foto in die rechte untere Ecke setzen. Das dient ausschliesslich dem Branding als Foto von unserem Blog. Bilder-Diebstahl lässt sich damit nicht verhindern.

Warum jetzt die Größe von 2048 Pixeln und maximal 990 Kilobyte? Ganz einfach, bei dieser Auflösung und einer Größe unter 1 Megabyte lässt Facebook die Finger vom Foto und komprimiert da nicht selber rum. Die Größe hat sich einfach bewährt um Fotos in einer guten Qualität bei Facebook zu zeigen.

Hier mal das Foto in der hohen Auflösung. Zur vollständigen Ansicht einmal anklicken, dann bekommt ihr das in der vollen Auflösung von 2048 Pixeln angezeigt, wenn Euer Monitor das kann.

Export für Pinterest

Für unsere Pins bei Pinterest kommt wieder Photoshop ins Spiel. Wir pinnen dort relativ selten „Nur-Fotos“. Meistens erstellen wir einen Pin pro Beitrag, der dann von uns auf verschiedenen Boards geteilt wird. Auch unsere Leser können diesen Beitrag pinnen, über einen Button am unteren Ende des Beitrages. Da ist dann auch die Pin-Datei über das Shariff-Plugin hinterlegt.

Ähnlich wie bei den Titelbildern haben wir uns in Photoshop eine Vorlage für unsere Pins erstellt. Das ist ein Rahmen, in dem das Foto angezeigt wird und unten drunter die Beschriftung uns unser Logo zu sehen ist.

Als Foto setzen wir hier die High-Quality-Variante aus dem Lighroom-Export ein, da diese die benötigte Größe liefert.

Der Export aus Photoshop erfolgt wieder über die Funktion „Für Web speichern…“, allerdings mit folgenden Einstellungen:

• JPG-Datei mit 40% Qualität
• in sRGB konvertieren (wir arbeiten aber sowieso in diesem Farbraum)
• Bildgröße 1128×1690 Pixel
• Qualität Bikubisch

Die Größe haben wir uns mal von einer Canva-Vorlage abgeschaut, wo man ja prima Grafiken für alle möglichen Social-Medias erstellen kann. Wir wollten aber unser eigenes Design haben und keine der Vorlagen dort benutzen, die alle einsetzen. Wichtig ist, dass es ein Hochformat ist, weil das bei Pinterest einfach besser funktioniert. Dabei sollte das Seitenverhältnis mindestens 1:2 betragen. 1:3, 1:4 oder noch länger ist nicht schlimm.

Und so sieht unser Pin dann aus (verkleinert – das Original seht ihr, wenn ihr den Beitrag unten weiterpinnt):

Export für Instagram

Instagram, ja – wir nutzen es noch um ein paar Tierfotos und Urlaubsfotos an unsere Follower zu teilen. Was wir für eine Einstellung zu diesem Medium haben, könnt ihr ein einem eigenen Artikel über Instagram nachlesen.

Egal, für Instagram nehmen wir die Exporten, die wir in hoher Qualität erstellt haben. Allerdings nur die Fotos, die wir im quadratischen Format bearbeitet haben. Und gerade bei unseren Tierfotos setzen wir das Format recht häufig ein, weil es für Tierbilder einfach genial ist. So müssen wir nur relativ selten eine Extra-Version für Instagram erstellen.

Geteilt werden die Fotos dann vom Smartphone aus. Hier haben wir Zugriff auf die Dropbox, wo die exportieren Fotos liegen und können diese von dort bei Instagram einstellen.

Von unserer netten Beispiel-Löwin haben wir als Muster eine quadratische Instagram-Version für Euch erstellt.

Schritt 7 – Archivierung der Daten

Kurz noch ein paar Worte zur Archivierung der Daten nach der Bearbeitung. Die RAW-Dateien kommen auf ein Laufwerk in unserem NAS. Dort haben wir alle RAW-Dateien aus den letzten Jahren gesammelt. Der Zugriff darauf erfolgt dann über einen Lightroom-Katalog pro Jahr.

Die entwickelten Bilder liegen in der Dropbox. Dort sortieren wir die regelmäßig weg, wenn diese nicht mehr zum Teilen benötigt werden. Die kommen dann ebenfalls auf ein Laufwerk in unserem NAS.

Wenn ihr mehr Details über unser Konzept bei der Datensicherung erfahren wollt, dann schaut euch gerne unseren ausführlichen Beitrag zum Thema Datensicherung als Blogger an.

Fotos fürs Web optimieren – nachträgliche Optimierung der Fotos

Es gibt zahlreiche Tools, mit denen Ihr eure Fotos auf dem Blog auch nachträglich noch optimieren könnt. Sogar als WordPress-Plugins stehen diese zur Verfügung. Wenn ihr so ein Tool benutzen wollt, dann sichert auf jeden Fall vorher die Fotos per FTP, damit ihr diese noch habt, wenn ihr mit dem Ergebnis der Optimierung nicht zufrieden seid.

Sei es Tiny-PNG, EWWW-Image-Optimizer, Kraken-Image-Optimizer oder wie sie alle heißen – die Tool machen einen mehr oder weniger guten Job und wollen dafür dann mehr oder weniger Geld haben.

Beachtet aber bitte, dass die nachträgliche Komprimierung auch einen Nachteil haben kann. Durch die Komprimierung wird eine neue Bilddatei erstellt. Somit das das Foto auch für Google ein neues Foto. Dadurch kann das bisherige Foto, was ggf. in der Bilder suche gut gerankt wurde, auf einmal abfallen – weil es ja ersetzt wurde. Martin Missfeld hat das erst kürzlich genau in seinem Artikel „Bilder verändern (Komprimieren, Maße, Dateiname): was passiert beim Bildersuche-Ranking?“ erklärt. Gerade das nachträgliche Komprimieren kann zu einem Verlust des Rankings führen.

Fotos fürs Web optimieren – Weblinks

Weitere Ansätze und Tipps zur Optimierung von Fotos im  Web, könnt ihr in folgenden Artikeln finden:

• Webdesign-Journal: Bilder optimieren fürs Web
• T3N: Bilder richtig für’s Web speichern mit Photoshop? So geht’s!
• Vom Landleben: Von der Kamera ins Blog – Mein Workflow für Blogfotos

Fotos fürs Web optimieren – Fazit

Ihr seht, jedes Medium hat seine eigene Anforderung an Fotos. Gerade beim eigenen Blog ist es wichtig, den richtigen Kompromiss zwischen Dateigröße und Qualität der Fotos zu finden. Es bringt nichts, super hoch auflösende Fotos auf den Blog zu stellen und die Ladezeit damit ins unendliche zu steigern. Damit vergrault ihr nur die Leser. Ebenso sinnlos ist es aber, Bild so klein wie möglich zu komprimieren und diese damit zu zerstören. Denn Fotos voller Artefakte und Tonwertabrissen will auch niemand sehen.

Sicherlich könnten wir bei unserem Workflow noch  mehr heraus kitzeln, auch was die Dateigröße einzelner Fotos angeht. Das hiesse aber, wir müssten jedes Foto einzeln optimieren und die perfekte Einstellung finden. Dafür fehlt uns aber die Zeit und auch die Lust. Und unsere Entwicklung bei Google spricht dafür, dass wir nicht sooo viel verkehrt machen.

Habt ihr jetzt  noch Fragen zu dem Thema oder Anregungen zum optimieren der Fotos für das Web? Dann schreibt doch einfach einen Kommentar hier unter dem Beitrag.