Fotos für Web optimieren

Großformatige Fotos ist ein Trend bei Design und Aufbau von Websiten. Bildschirmfüllend als Hintergrund, Portfolioseiten und Animationen bei denen der Ausschnitt eines Großformates sichtbar ist, verlangen oft eine Bildbreite von 2000px. Fotografen deren Kunden aus dem Grafik oder Agenturbereich mit großen Eizo oder Retina Panelen auf die Seite kommen müssen dabei noch einiges drauflegen wenn sie im Großformat beeindrucken möchten.

Darum sind wir der Frage der optimalen Speicherung von Fotos nachgegangen und haben neben den Standardwerkzeugen ob es unter den neue Apps und online-Tools Alternativen zum Photoshop gibt. Fazit vorweg: das beste Werkzeug ist der Photoshop mit den richtigen Einstellungen.

Das Titelbild vom Schloß Schönbrunn ist dabei unser Versuchsbild. Skaliert ins Format 2000/1333 px (PS/Bild/Bildgröße – bikubisch) hat es ohne sichtbarem Qualitätsunterschied als JPEG 60/100 eine Dateigröße von fast 900 kB.

Bei einer Darstellung von 200% werden unter JPEG 50/100 Unterschiede sichtbar. Die Aufgabe die wir uns gestellt haben ist es daraus 2 Versionen fürs Web zu generieren:

  1. Foto für Seitenhintergrund bei der wir geringe Qualitätsabstriche akzeptieren unter 100 kB
  2. Portfoliodarstellung die nahezu dem Original entsprechen soll unter 250 kB

Compressor.io

screencapture-compressor-io-compress-1461371297523

Das erste online Werkzug mit dem wir versucht haben das Bild auf tauglich fürs Internet zu machen war Compressor.io Ohne Anmeldung und Kosten kann man ein Foto hochladen, hat die Möglichkeit zwischen 2 Kompressionssufen und bekommt ein File zum Download angeboten. Die Reduktion von 46% (siehe Foto) ist beeindruckend, erfüllt unsere Bedigungen leider nicht annähernd.

Die beiden Kompressionsstufen bringen qualititativ sehr ähnliche Resultate was vermuten läßt dass einzig die Headerdateien entfernt werden und die JPEG Kompression gering erhöht wird. Das gleiche Resultat hat sich uns bei anderen Tools und Webangeboten ergeben.

Photoshop Export

Ausgehend von dem Foto mit 2000/1333px abgespeichert mit „für Web sichern“ und der Einstellung 60/100 war die Dateigröße: 569 kB Wir haben die Kompression dann von 60 auf 38/100 gestellt und eine Datei von unter 250 kB erhalten.

Portfoliobild 250 kB

Vergleichen Sie selbst das Resultat:

3

Mit einer Vergrößerung von 200% sehen Sie links das Referenzbild, rechts das optimierte Foto mit 241 kB und kaum sichtbaren Unterschieden.

Hintergrundbild 100 kB

Mit der Einstellung 8/100 sinkt die Dateigröße auf 98 kB.
Vergleichen Sie selbst das Resultat:

Wieder sehen Sie eine Vergrößerung von 200% und man erkennt leichte JPEG Artefakte. Für eine Darstellung als Hintergrundbild ist es jedenfalls geeignet.

Arbeitsschritt für Profis

Mit dem Resultat haben wir uns nicht zufrieden gegeben, immerhin ist das nichts neues und jeder mit Zugang zu einem Programm von Adobe und der Funktion „Exportieren/für Web speichern“ kann das genauso. Für Profis muß es einen Wettbewerbsvorteil geben und ich fühlte mich persönlich herausgefordert diesen zu finden.

Nach einigen Test mit Einstellungen, Filtern und Kontrasten habe wir dann auch wirklich eine Technik gefunden die uns erstaunt hat. Das Resultat ist eine Hintergrunddatei mit 76 kB und eine Portfolioversion bei der wir die Qualität extakt der Referenz anpassen konnten und immer noch unter 250 kB geblieben sind. Zur Erinnerung: mit einem Foto im Format: 2.000/1.333 px.


Der A/B Vergleich wird in den nächsten Tagen wieder online gestellt.