Eine kleine (technische) Vorgeschichte: Manchmal habe ich Zeit etwas an meiner Homepage zu basteln, um hier und da einige Verbesserungen vorzunehmen. Nun hatte mich die letzten Tage doch stark beschäftigt, wie ich meine Bilder besser im Blog präsentieren kann. Allen voran stand dann erstmal ein etwas umfangreicheres, aber überfälliges, Upgrade an, um mein WordPress-Theme Retina tauglich zu bekommen. Wem Retina nichts sagt, das sind jene Displays die für Menschen mit schlechten Augen gemacht sind, damit sie die „Welt“ wieder klar sehen können. Die Displays haben eine höhere Pixeldichte und mittlerweile kommt der ein oder andere Bildschirm schon mit einer 5k (5.120 x 2.880 Pixel) Auflösungen daher. Jene native Auflösung unterscheidet sich von der eigentlichen Darstellung, welche optimal bei der Hälfte liegt. Im Falle des iMAC 5k wären das dann z.B. 2.560 x 1.440 Pixel. Über die Software kann das dann noch nach oben oder unten skaliert werden. Ich arbeite auf einem MAC BookPro 13″ mit einer nativen Auflösung von 2560 x 1600 Pixel. Die optimale Auflösung würde bei 1280 x 800 liegen. Da ich aber gerne Platz für all die schönen Optionen in Lightroom habe verwende ich die skalierte Auflösung von 1680 x 1050.
Bei der optimalen Auflösung stehen für die Darstellung also die vierfache Anzahl an Bildpunkten (Pixel) zur Verfügung. Das sorgt für wesentlich schärfere Bilder und Schriften. Das Problem ist nun, dass ältere Webseiten für „gewöhnliche Bildschirme“ keine Bilddateien bereitstellen, die diesen hohen Auflösungen gerecht werden. Meist sehen die Logos, Thumbnails und auch die Bilder dann einfach nur matschig aus. Insbesondere bei skalierten Auflösungen. Ja – und genau so war das auch auf www.freiheitenwelt.de. Wenn ich mir die Frontpage und die Bilder jetzt ansehe, kann ich gar nicht verstehen, warum ich dem nicht schon früher nachgekommen bin. Es liegen wirklich Welten dazwischen. Falls nun jemand mit einem „gewöhnlichen Bildschirm“ und guten Augen (wie abwertend nicht ;-)) mitliest, keine Sorge – was ich in diesem Artikel erklären will hat mit all dem im Detail eigentlich überhaupt nichts zu tun. Vorgeschichte Ende:
Lange Geschichte kurz -> Es müssen nun größere Bilddateien ins Netz gestellt werden, um einen Vorzug von dem Ganzen zu haben. So kam ich also nicht umhin mich zu fragen, wie ich denn nun die neuen Bilder hoch laden soll? Natürlich will ich meine Arbeiten nur bestens präsentieren. Sind 2000px nun genug oder muss es noch mehr sein? Was machen eigentlich die Browser? Wie sieht es denn mit der Dateigröße aus? Wird die Ladezeit nicht länger und kann man eventuell die Dateien geschickter optimieren? Letzter Punkt hat mich am meisten beschäftig und schon lange stelle ich mir die Frage, wie ich die Exportfunktion von Lightroom optimal für meine Bilder einstelle.
Für gewöhnlich hatte ich meine Bilder mit einer Auflösung von 1200px, einer standard Ausgabeschärfe und einer Qualitätseinstellung von 85 aus Lightroom verabschiedet. Wird schon so ungefähr passen, dachte ich mir. Die Bilder hatten so um die 350KB, was bei heutigen Internetgeschwindigkeiten nun wirklich nicht mehr die Welt ist. Zumindest im verwöhnten Deutschland nicht, hier in Südamerika geht es schon noch etwas gemütlicher in den Datenleitungen zu. Das alles sah also einigermaßen gut aus und um mehr hatte ich mich nicht weiter gekümmert.
Bei einem ersten Testexport war mit den gleichen Einstellungen bei 2000px die Bilddatei aber dann knapp 1MB groß. Das sind +- 10MB, um z.B. eine Slideshow von 10 Bildern in voller Auflösung zu laden. Wie in diesem Artikel z.B. möglich -> Feuerwerk in Urubamba. Das will ich meinen Lesern und mir beim Upload nicht zumuten. Somit komm ich nun endlich auch zum eigentlichen Kern dieses Posts.
Der Optimierung von Bildern mit Hilfe der Dateieinstellungen aus Lightroom heraus.
Die bekanntesten Internetbrowser sind alle Retina tauglich. Im Bezug auf die Bildpunkte beziehen sie sich allerdings nicht auf die native Auflösung, sondern die skalierte. Im Browser würde ein 2000-Pixel-Bild auf einem 4K Monitor also den ganzen Bildschirm füllen, wenngleich dann nicht alle möglichen Bildpunkte genutzt werden. Für kleine Vorschaubilder wird dementsprechend für eine klare Darstellung die doppelte Auflösung gefordert. Ich weiß das ist etwas verwirrend. Unterm Strich geht es nur darum eine günstige Auflösung zu finden, was Qualität und Dateigröße anbelangt. Meine größten Vorschaubilder haben eine Auflösung von 710 Pixel und Retina benötigt dementsprechend also 1420 Pixel. Da im Vollbild noch etwas Luft sein soll scheinen die zuerst angedachten 2000 Pixel ganz OK zu sein.
Um nun die Qualitätsunterschiede in Bezug auf den Export vergleichen zu können, habe ich ein Testchart der Firma Eizo in verschiedenen Komprimierungsstufen exportiert und miteinander verglichen. Zum Vergleich habe ich auch Lightroom genutzt, was wiederum mit der nativen Auflösung arbeitet. Ein Zoom auf 2:1 entspricht dann in etwa dem Bild, dass ich über den Webbrowser bei Vollbild erhalte. Auf meinem Rechner ist dafür schon überhaupt kein Platz mehr. Wie die Browser die Bilder im Vollbild verwenden ist mir auch noch ein Rätsel. Zumindest was die Skalierung und die Nutzung der nativen Pixel angeht. Das Testbild gibt es hier zum download.
Im direkten Vergleich und bei einer 1:1 Wiedergabe konnte ich hier selbst zwischen den Qualitätsstufen 100 und 30 fast keine Unterschiede feststellen. In der 2:1 Ansicht sieht es dann schon etwas anders aus und es gehen schon einige Details verloren. Dem stehen eine Dateigröße von 1,8MB zu 252KB entgegen. Das macht schon einen großen Unterschied. Auf Stufe 80 wären es 848KB. Die beiden Bilder hier oben habe ich für euch unkomprimiert hochgeladen. (WordPress komprimiert noch nach – soll aber nicht stören). Mit einem Klick gelangt ihr in die Vorschau -> Wenn ihr das Bild ganz groß sehen wollt klickt nochmal rechts und dann „In neuem Tab öffnen“ oder „Bild öffnen“, je nach Browser.
Bei den enormen Unterschieden in der Dateigröße und den marginalen visuellen Unterschieden ist es schon verlockend die Optimierung auf 30 zu setzen. Für Webseiten in welchen die Fotografie nicht im Vordergrund steht hätte ich damit auch überhaupt keine Probleme. In meinem Fall soll es schon etwas besser sein und ich suche nach einem zufriedenstellenden Ergebnis zwischen 30 und 80. Interessant ist zu sehen, dass die Komprimierung bei 47 (400KB) und 62 (525KB) einen kleinen Sprung macht. Die Dateigrößen sind dazwischen alle gleich, wobei sich die Ergebnisbilder noch leicht von einander unterscheiden. Sicherlich ist dies aber von Bild zu Bild unterschiedlich.
Ab 62 aufwärts – spätestens ab 70 kann ich rein visuell überhaupt keinen Unterschied mehr in Bezug auf die Qualität feststellen, zumindest auf einen normalen Abstand zum Bildschirm. Ich habe mich dennoch erstmal für eine noch niedrigere Stufe (50) entschieden. Es wird sich in den kommenden Blogbeiträgen zeigen ob diese Komprimierung sich bewährt oder nicht. Wie schon geschrieben hängt dies ja auch von den jeweiligen Bildern ab. Auch muss sich noch zeigen, wie sich die Bilder in den Thumbnails verhalten. Gleichen Test hatte ich noch mit einer Auflösung von 1200px durchgeführt. Das Ergebnis, wie auch die Sprünge waren dabei genau die gleichen.
Ich wünsche euch was – schreibt mir doch was ihr für Einstellungen beim Lightroom-Dateiexport verwendet.
@MartinLeonhardt
Willst du keine Neuigkeit auf Freiheitenwelt verpassen oder weitere Insiderinformationen erhalten? Dann abonniere den Newsletter und die Beitragsbenachrichtigung. Du bist nur einen KLICK entfernt.
Freiheitenwelt gibt es auch auf Facebook, Google+, Twitter, YouTube und Instagram.
