Fotos richtig fürs Web speichern

Großformatige Fotos sind für Portfolioseiten notwendig doch mit Googels „mobile first“ Strategie ist die weboptimierung eines der entscheidendsten Kriterien für den Erfolg einer Website geworden. Bildschirmfüllend als Hintergrund, Portfolioseiten und Animationen bei denen der Ausschnitt eines Großformates sichtbar ist, verlangen oft eine Bildbreite von 2000px.

Dateigröße: 43 kB (200x627px)

Fotografen deren Kunden aus dem Grafik oder Agenturbereich mit großen Eizo oder Retina Monitoren auf die Seite kommen müssen dabei noch einiges drauflegen wenn sie im Großformat beeindrucken möchten.

Wir sind 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.

Foto hatte als Datei fast 1 MB

Das Titelbild vom Schloß Schönbrunn ist dabei unser Versuchsbild. Viele kleine Details und Strukturen am Schloss zusammen mit Gras und Büschen im Vordergrund ist es keine leichte Aufgabe daraus eine webfähige Datei zu machen ohne dass Bild zu verschlechtern. Reine Verläufe, ohne Microkontrasten und Details sind leicht zu komprimieren. Das ist die Stärke des Bildformates „jpeg“. Davon ist in diesem Bild gerade der obere Teil, der Himmel, abgedeckt. Und einfach im Photoshop ausgeschnitten dabei das Format 2000/627 px (PS/Bild/Bildgröße – bikubisch) gewählt, ergibt sich eine Datei von fast einem MegaByte. Das geht auf keinen Fall.

Als Faustregel gilt: nie mehr als 250 bK und das nur bei bildschirmfüllenden Formaten. Alles andere muß weit unter 100 kB liegen

Eine Herausforderung

Die Aufgabe die ich mir gestellt habe ist es daraus 2 Versionen fürs Web zu generieren:

  • Foto für Seitenhintergrund bei der wir geringe Abstriche akzeptieren unter 100 kB
  • Portfoliodarstellung die nahezu dem Original entsprechen soll unter 250 kB

Richtig exportieren

[ihc-hide-content ihc_mb_type=“block“ ihc_mb_who=“unreg“ ihc_mb_template=“5″ ]

Ausgehend von einem Foto mit 2000/1333px abgespeichert mit „für Web sichern“ und der Einstellung 60 war die Dateigröße: 569 kB bei der Einstellung 30 haben wie eine Datei von unter 250 kB erhalten.

Das ist der direkte Vergleich: links eine viel zu große Datei fürs Netz mit 569bK und rechts eine nicht einmal halb so große mit 241 kB. Beides in einer Vergrößerung von 200%

3

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

Hintergrundbild 100 kB

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

2

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 habe ich mich 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.

Detailreiche und Bildschirmfüllende 76 kB

Das Resultat ist eine Hintergrunddatei mit 76 kB und eine Portfolioversion bei der ich 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 das ist in vielen Fällen mehr als bildschirmfüllend.

 

[/ihc-hide-content]

 

 


Eine Antwort hinterlassen

Dieser Artikel wurde seit Veröffentlichung nicht geändert.

Dieser Beitrag wurde erstellt von Paul Wilke am 2. Juli 2017.