Fotos 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  (900px breit) um mindestens 100 kB zu viel, insbesonders als daß es auch auf der Titelseite eines von mehreren Fotos war.

Publizierte 191 kB vs. optimierte 37 kB

Nach nur 4 Optimierungsschritten ist das Bild mit 900px Breite trotz deutlich höherer SchĂ€rfe und scheinbar mehr Details dem falsch gesicherten im Netz haushoch ĂŒberlegen: statt 191 kB werden nur noch 37 kB zum Surfer ĂŒbertragen.

A/B Vergleich

Schieben Sie den Regler nach rechts und vergleichen Sie selbst.

 

Ein Gewinn von 154 kB pro Bild auf einer Website und pro Besucher bei durchschnittlichen Seitenaufrufen und Bildern pro Seite ergibt sich ein Einsparungspotential in Summe von 2,5 MB. Bei Homepages von Fotografen und Portfolioseiten ist es ein vielfaches und es können dabei auch 50 MB oder mehr zustande kommen.

Ein unnötiges Datenvolumen welches Kunden im Netz zum Warten verdammt. Liegt die Website bei bei einem billigen Provider (shared server) und es entsteht mehr Traffic können sich die Wartezeiten des Surfers auf weit ĂŒber 10 Sekunden bei jedem Klick verlĂ€ngern.

 

VernĂŒnftiger Kompromiss mit Reduktion auf 27 kB

Nach 3 Optimierungsschritten ist das Motiv in SchÀrfe und Kontrast, sowie in den Details dem falsch gesichertem Bild nahezu ident und hat bei gleicher Dimension nur noch 27 kB.

Vergleichen Sie selbst – verschieben Sie mit der Maus den Regler.


Kleine Abstriche – großer Gewinn: 900 px breites Foto mit 191 kB im Vergleich zu weboptimierten 27 kB

 

1. Schritt: die Bildbearbeitung

[ihc-hide-content ihc_mb_type=“show“ ihc_mb_who=“reg“ ihc_mb_template=“5″ ]

Wenn Sie die feinen Unterschiede der beiden Bilder erkennen, können Sie vielleicht auch den Weg erkennen den ich bei der Optimierung gegangen bin.

SchÀrfe

FĂŒr die schĂ€rfere 37 kB Version habe ich das Bild mit dem Nik Sharpener (gratis Plugin von Google – Link in der Toolbox ) partiell geschĂ€rft.

Die maximale Wirklung liegt dabei auf einigen wenigen Bildelementen die dem Betrachter ins Auge fallen sollen. Logo und SchriftzĂŒge in erster Linie, zur besseren Veranschaulichung  und aufgrund des Fachpublikums hier auch Mattierungen (Auslöser, Oberseite) und die Rillen am Objektiv.

Beides wĂ€re bei einer Auftragsarbeit wĂŒrde beides weniger stark ausfallen. Um weitere 8 – 10 kB einzusparen wĂŒrden dabei unter anderem die Rillen am Objektiv weichgezeichnet werden. Das bringt nebenbei ein wenig Tiefe ins Sujet.

Details entfernen

Mit 2 Filter geht es weiter:

Staub und Kratzer

Unter dem MenĂŒ Filter/Rauschfilter wenden wir – auf einer kopierten Ebene – den Filter „Staub und Kratzer“ an. Mit einem Radius von maximal 5, zumeist aber 1 – 2 je nach Motiv. Ziel ist es eine Ebene mit dem Motiv ohne den kleinsten Details zu erhalten. Durch Ausmaskieren werden danach großflĂ€chig Bereiche diese Details gelöscht. Im Demobild habe ich mit einem 100% Pinsel alleine im schwarzen Hintergrund damit viel an Rauschen entfernen können welches ich auch auf meinem Eizo nicht erkennen konnte – aber doch einige kB eingespart hat. Die Kamera selbst wurde gesamt mit 30 – 50% von diesen Details erlöst. Ausser: die Rillen am Objektiv und den Auslöseknopf.

Matter machen –  ein Weichzeichner

Dieser Filter wird gleich verwendet wie der erste – also neue Ebene und ausmaskieren. Ziel ist es „einfĂ€rbiges“ auch einfĂ€rbig zu machen und damit der JPEG Kompression einen ordentlichen Anschub zu geben.

Matter machen ist eines der wichtigsten Werkzeuge beim optimieren fĂŒrs Web und hat das Zeug das Internet um Lichtjahre zu beschleunigen.

in Arbeit ….. es folgt: das Speichern

[/ihc-hide-content]

 

 

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerkenMerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerken

MerkenMerkenMerkenMerken

MerkenMerken

MerkenMerkenMerkenMerken

MerkenMerken


Eine Antwort hinterlassen

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

Dieser Beitrag wurde erstellt von Paul Wilke am 25. August 2017.