Hallo,

ich möchte mein Portfolio in einer Fullscreen Bildergalerie online präsentieren.
In welcher Auflösung (und mit welcher Einstellung) würdet Ihr die Bilder speichern?

Danke für Tipps
Fadenschein

In mehreren und abhängig von der Auflösung des Displays die geeignete zücken? Sorgt für schnelle Ladezeiten aber auch für Detailreichtum, je nach Auflösung. Solange Du nicht tausende Bilder hast, so dass Dein Webspace ans Limit gerät.

Sehe ich auch so wie MacRudi. Es gibt mittlerweile gute techniken und Scripte, mit denen das Gerät, die Browsergröße, die Auflösung (retina oder non-retina) abgefragt werden kann. Entsprechend liefert der Server das passende Bild an das Gerät aus. Für ’nen iMac 27 5K können das bei Vollbild auch mal 5120 x 2880 Pixel sein, bei einem iPhone 3 mit seinen 640 x 480 reichen aber auch weniger.
Je nachdem, ob du eine statische Seite oder ein CMS dahinter hast, kann das CMS die passenden Auflösungen für die verschiedenen Geräte auch selbst berechnen. Ansonsten gibt’s für den Mac auch mehrere Tools, die genau das machen (Bilder in verschiedenen Auflösungen raushauen).

@MacRudi und Krypton

Danke für Eure Hinweise. Soweit ich weiß, verwendet unsere Seite nur eine Auflösung.
Ich weiß nicht, ob die Bilder dann serverseitig oder browserseitig skaliert werden.
Gäbe es für diesen Fall eine 'Kompromissauflösung', die Ihr wenigstens wählen würdet?
Auf einem 27 5K iMac müssten die Bilder ja nicht unbedingt Fullscreen voll aufgelöst sein.
Ich könnte bspw. die Auflösung eines 15" Macbook Pro Retina nehmen, also 2.880 Pixel?

Was ist denn das für ein Portfolio? Bist du Fotograf oder Designer?

Denk auch immer daran, je höher die Qualität ist, die du ins Netz stellst, desto öfter bedienen sich da auch gern ungefragt Leute dran – gerade bei Fotografien. Je mehr Pixel die dann letztlich haben, desto besser sind die eben auch druckbar und sind dann ganz besonders beliebt.

@breaker
Ich bin Architekt. Wenn die Fotos 'auf Reise' gehen, ist das nicht unbedingt ein Nachteil.
Ich denke ich starte mit den 2.880 Pixeln.

Mit Kompromissauflösungen haben die meisten Jahrelang gearbeitet und keiner war wirklich zufrieden. Deswegen wurde ja unter anderem die Responsive-Technik entwickelt. Jetzt könnte man (mit dem passenden System) jeden zufriedenstellen.
2880 sind für Retina-Books o.k. für Smartphones im UMTS oder Edge-Netz unfassbar groß (und langsam zu laden) und für die Präsentation am 50" 4 K Fernseher/Projektor zu klein und unscharf.

Es bleibt eben ein Kompromiss und der wird mit der Größe an «Empfangsgeräten» immer schlechter (vom 3,5" Smartphone im langsamen Netz mit Volumentarif bis zum 88 Zoll 4K SmartTV) Die Bandbreite ist heute einfach zu Enorm, als dass sich da ein «guter» Kompromiss finden lassen würde, der dann auch noch für ein paar Jahre! halten soll.

Wenn «alternativlos» nix anderes geht, kannst du (wenn vorhanden) in die Google-Analytics oder Serverstatistik schauen und eine Auflösung wählen, welche einen Großteil der bisherigen Nutzer trifft. Wenn Smartphones und halbwegs große Displays abgedeckt werden sollen, würde ich mich an Full HD (1920) orientieren, wenn Smartphones keine Rolle Spielen, eher in Richtung 3000 px.

Mit großer Wahrscheinlichkeit wird dich das Thema aber in nicht all zu ferner Zukunft wieder einholen und du darfst nochmal ran. Das einzige mit etwas Zukunft ist responsive und an das Gerät angepassten Auflösungen.

Eine gute Kompromisstechnik ist es, die Bilder mit der doppelten Auflösung reinzugeben, als sie eigentlich dargestellt werden, aber dafür die Qualität/Komprimierung des JPEG Bildes auf nahe 0 zu stellen. Dadurch wird die Dateigröße deutlich reduziert, der Qualitätsverlust ist allerdings durch diese Verwendungsart fast nicht mehr erkennbar.

So kannst du dann auch Bilder reingeben die ne hohe Auflösung haben ohne dir dadurch gleich riesige Dateigrößen einzufangen.

Also da habe ich meine Bedenken. Hast Du da mal ein Beispiel? Ich würde annehmen, dass ein 1920x1080 Foto in guter Qualität optisch besser rüberkommt als ein 3840x2160 Foto mit nahezu 0er Qualität. Beides bei gleicher Dateigröße.

Wobei mir gerade die Idee kam: interlaced. Das sind ja Grafiken, die zeilenweise geladen und dargestellt werden, damit man schon früh einen Eindruck bekommt/was sieht. Interlaced gibt es bei png, aber ja nicht bei jpg. Cool wäre, wenn in einer jpg-Datei mehrere Auflösungen wären. Und zwar nicht so, dass die Datei größer wird, sondern so, dass für eine erste Anzeige nur bestimmte Pixel gelesen werden und dass die auch bei kleinen Darstellungen genommen werden. Je größer die Darstellung, um so mehr wird geladen. Dafür müssten die kleineren Auflösungen in der Datei vorn stehen. Wahrscheinlich ist das wohl bloß mit der Komprimierung der Datei nicht in Einklang zu bringen.

@Macrudi, das ist ein mittlerweile recht bekannter Trick und funktioniert sehr gut wenn es zb darum geht Retina Bilder auf einer Website zu ermöglichen. Dabei haben die Bilder mit der doppelten Auflösung am Ende meistens sogar eine geringere Dateigröße, als die Originalen, ohne das man den Unterschied in der Qualität trotz massiver Komprimierung direkt erkennt. Wichtig ist eben das das Bild mit doppelter Auflösung dann wieder auf die halbe Größe in der Darstellung gezogen wird. So wie das bei Retina Screens funktioniert. Durch diese Darstellung kann man die durch die Komprimierung entstehenden Artefakte kaum mehr erkennen, während die Bilder dann schön scharf sind.

Dazu gibt es einige Artikel mit Beispielen im Internet, habe mal versucht schnell was zu finden und zb das hier gesehen. (Die Beispiele auf der Seite dürften allerdings nur auf einem Retina Bildschirm richtig dargestellt werden soweit ich die Beschreibung gesehen habe.)

Danke fürs Beispiel. Wenn das Bild vom Browser auf einer kleineren Fläche dargestellt wird als die Pixelmaße sind, also verkleinert dargestellt wird, werden erstmal aus allen gegebenen Pixeln die neuen Pixel berechnet, danach aber auch noch mal der Kontrast verstärkt, weil sonst eine zu weichgespülte Darstellung dabei herauskommen würde. Die Artefakte gehen bei der Verkleinerung schon mal zum Teil drauf, vielleicht auch bei der Kontrastverstärkung noch einmal. Weiß da jemand Genaueres?

Im Fall von 2x Retina Screens wird das Bild nicht halbiert sondern genau in der nativen Größe dargestellt.

Da gibt es übrigens noch einen weiteren Trick, indem man die Skalierung des Bildes absichtlich nicht um ein vielfaches vergrößert sondern um einen Anteil davon (ich bilde mir jetzt ein die Zahl war irgendwas um die x1,5 aber da müsste ich jetzt nachschauen.) In dem Fall wird nämlich so wie du angemerkt hast vom Browser beim rendern nochmal drüber gerechnet und dabei verscheiden Verfahren angewendet die auch ein schöneres Bild ergeben können. Ist aber jetzt nur aus meine Gedächtnis, die Variante habe ich noch nicht angewendet.

Diese Variante verwende ich, aber aus anderen Gründen