Blog

Fotos richtig web-optimieren – 2000px breit aber unter 250 kB

Großformatige Fotos sind für Portfolioseiten notwendig und mit Googles Vorgabe „mobile first“ wird die Weboptimierung eines der entscheidendsten Kriterien für den Erfolg einer Website. Bildschirmfüllend als Hintergrund, Portfolioseiten und Animationen bei denen der Ausschnitt eines Großformates sichtbar ist, verlangen Bilder mit zumindest eine Bildbreit von 1400px – wie soll das zu schaffen sein?

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-Datei mit 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/1333 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

Photoshop Export

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.

 

 

Ankündigung: Teil 2

In Teil 2 zeige ich wie man ein Foto ohne sichtbarem Unterschied von 500 kB auf knapp 80 kB reduziert und wird vorraussichtlich in der zweiten Juliwoche publiziert.

Über Fotos die ich in diesem Rahmen verwenden kann würde ich mich sehr freuen. Also wer ein Foto werboptimiert haben will – schickt es an: weboptmieren@paulwilke.at

 

MerkenMerken

TOP 10 InSide Berichte mit ähnlichen Stichworten

  • Fotos perfekt web-optimieren | Teil 2: Bild um 86% reduziertFotos perfekt web-optimieren | Teil 2: Bild um 86% reduziert Für den zweiten Teil der Serie über die Optimierung von Bilddaten haben wir ein typisches Produktfoto gewählt. Es ist ein Pressebild welches in einem prominenten deutschen Foto Blog publiziert wurde. Die Originaldatei wie sie zu sehen war hat 191 kB. Das ist auch für eine mittlere Größe […] Posted in Allgemein, Titelseite, Tutorials
  • Vorschau: Bilder richtig fürs Web optimieren ll – A/B VergleichsbildVorschau: Bilder richtig fürs Web optimieren ll – A/B Vergleichsbild Für den zweiten Teil der Serie über die Optimierung von Bilddaten haben wir ein typisches Produktfoto gewählt. Es ist ein Pressebild welches in einem prominenten deutschen Foto Blog publiziert wurde. Die Originaldatei wie sie zu sehen war hat 191 kB. Das ist auch für eine mittlere Größe […] Posted in webpicts
  • Schwerpunkt Web-Optimieren: Google Logo 28% reduziert 💯Schwerpunkt Web-Optimieren: Google Logo 28% reduziert 💯 Über 28% unnütze Daten auf die der Surfer mit dem Aufruf alleine des Google Logos warten muss¹. Bei Milliarden geladenen Dateien sind das terabytes an Daten und vermutlich viele Millionen Euro Kosten die durch Logos sinnlos verursacht werden. Das offizielle Logo von Google hat im […] Posted in Unternehmen, Titelseite, Tutorials
  • Portfolioseite über Nacht um € 0Portfolioseite über Nacht um € 0 Portfolio – Seiten sind die neueste Melkmaschine mit der vorrangig Fotografen Kollegen beworben werden. Ein schlichtes Rezept – man nimmt eine Homapage, entfernt typisch textlastige Seiten, bietet eine Unzahl an Optionen mit denen sich Bilder bewegen und größtmöglich darstellen lassen […] Posted in Marketing, Tutorials
  • photokina 2016: Neue FUTUREZONE findet große Resonanz in der Gründerszenephotokina 2016: Neue FUTUREZONE findet große Resonanz in der Gründerszene Die photokina bietet nicht nur den globalen Playern der Imaging Branche eine große Bühne, sondern auch Spezialausrüstern und jungen Unternehmen, die mit smarten Produkten und kreativen Konzepten den Markt bereichern. Mit der FUTUREZONE ermöglichen photokina und Photoindustrie-Verband […] Posted in PK2016
  • Google macht ernst und startet den MobiltestGoogle macht ernst und startet den Mobiltest Mobil - Test hat begonnen Wenn kein Kunden verloren werden sollen ist es wichtig nicht zu warten bis die Seite von Google selbst besucht wird. Google bietet auf seiner Seite ein Tool an, die Homeapge selbst zu prüfen und das auch gleich als erledigt zu melden. Google schreibt von […] Posted in Allgemein, Tutorials
  • Erstes serverloses Hosting für WordPressErstes serverloses Hosting für WordPress DigitalCube hat das Produkt Shifter vorgestellt. Dabei werden aus einem WordPress Blog unzählige statische html Seiten generiert und diese über ein globales Netzwerk aus Zwischenspeichern (CDN) an den Server verteilt. Damit werden die Seiten rasend schnell zum Besucher geliefert. […] Posted in Allgemein, Titelseite, Tutorials
  • Änderung bei Foto für US Visum Änderung bei Foto für US Visum  Die US - Botschaft hat uns informiert dass ausnahmslos nur noch Bilder ohne Brille angenommen werden. Andere Bestimmungen bleiben gleich und können hier nachgelesen werden. Links zu den internationalen Vorschriften kommen ehestbaldig in die Toolbox. US-Visum Kriterien Fotos und […] Posted in Tutorials
  • Die Preisfrage zur PreislisteDie Preisfrage zur Preisliste Soll ein Dienstleister die Preisliste auf der Homepage publizieren oder nicht? Diese Frage beschäftigt mich seitdem ich 1996 für unser Portraitstudio die erste Homepage erstellt habe. Meine Antwort darauf ist seit damals ein klares JA. Aber wirklich sicher war ich mir zu Beginn nicht. […] Posted in Intern, Tutorials
  • Lomo’Instant AutomatLomo’Instant Automat Als Sofortbild - Kamera sowohl für Anfänger als auch für Profis ist die Lomo’Instant Automat ideal für unkompliziertes Fotografieren zu jeder Zeit. Blende, Belichtungszeit und Blitzstärke werden automatisch an das Umgebungslicht angepasst.´ Allzeit bereit für jede […] Posted in Allgemein, Titelseite

Eine Antwort hinterlassen