4k-Monitor: Auflösung und Skalierung

[Robinson74]

Geschätzte Foren-Gemeinde

Ich habe einen 4k-Monitor "BenQ SW320" mit einer Auflösung von 3840 x 2160 Pixel. Dieser Monitor ist echt genial welcher mir auch sehr viel Freude macht!

Wegen der enormen Auflösung sind bei Windows 10 die Icons und Fenster ja viel zu klein, so dass man nur mit dem Feldstecher etwas erkennt. Für das hat ja Windows 10 die Funktion eingebaut, dass man in den Anzeige-Einstellungen die Skalierung anpassen kann: Bei 3840 x 2160 Pixel ist die vorgeschlagene Skalierung 150%. Dies finde ich echt gut und man kann damit in Windows und Lightroom wunderbar arbeiten.

ABER:
Ich betreibe eine kleine Fotografie-Homepage (Link: siehe Signatur). In dieser Homepage habe ich alle Fotos hochgeladen mit einer Länge von 1600 Pixel und einer Auflösung von 96 dpi. Wenn ich nun meine Homepage betrachte auf einem "herkömmlichen" Monitor mit einer Auflösung von 1920 x 1200 Pixel, ist das Foto gestochen scharf. Jedoch auf meinen 4k-Monitor mit 3840 x 2160 Pixel erscheinen die Fotos unscharf da ja die Skalierung von 150% sich auch auf den Browser auswirkt. Somit wird auch das Foto um 150% skaliert und es wird unscharf, da es ja gestreckt wird...

Kann man das irgendwie besser lösen? Anderer Browser (meiner ist Google Chrome)? Die Fotos ist einer anderen Grösse oder in einer höheren Auflösung hochladen?

Danke für eure Hilfe!

 

[Sushirunner]

Ich dachte, die Skalierung wirkt nur auf Icons & Text, also vektorbasierte Anzeige?
Bist du sicher, dass dein Bild skaliert wird, oder sind einfach die 1600px generell viel zu wenig für die 4k Auflösung?

 

[Robinson74]

Bist du sicher, dass dein Bild skaliert wird?

Ja, das Foto wird auch skaliert.

Oder sind einfach die 1600px generell viel zu wenig für die 4k Auflösung?

Das wüsste ich auch gerne...

 

[Gast_18092]

Kann man das irgendwie besser lösen? Anderer Browser (meiner ist Google Chrome)? Die Fotos ist einer anderen Grösse oder in einer höheren Auflösung hochladen?

Ich habe das gleiche Problem (wobei ich 150%) noch nicht als Problem sehe.
Alle die keinen 4K Monitor haben sehen doch deine Bilder so scharf wie du das vorgesehen hast, das ist doch auch nicht so schlecht.
Oder du lädst alles in 4K auf deine Hompage und diejenigen die einen kleineren Monitor haben müssen sich anpassen.
Solange wir unterschiedliche Geräte benutzen wird es immer Kompromisse geben müssen.

 

[droehnwood]

Hi,

du solltest auch mal schauen, ob du noch zusätzlich eine Skalierung im Browser aktiv hast. Mit Strg+Mausrad kann man im Browser auch hinein/hinaus zoomen. Mit Strg+0 auf 100% gehen.

 

[Gast_18092]

Das ist ja gerade der Witz das Webseiten auf 150% skaliert werden, also ich könnte das Forum in 100% nicht lesen.
Aber wie gesagt, ich finde die skalierten 1200 Pixel Bildchen hier noch ausreichend scharf solange von der Aufnahme und anschließender EBV alles passte.

 

[rower]

Ja, das Foto wird auch skaliert.

Wie breit in cm sind deine Bilder, wenn du sie dir auf dem 32" 4K Bildschirm über den Browser anschaust ?

43 bis 44 cm ?

Wenn ja, werde ich meine Vermutung über dein "Problem" äußern ... ( ich habe auch einen 32" 4K Bildschirm )
wenn nein, habe ich keine Vermutung

 

[Robinson74]

Hi,

du solltest auch mal schauen, ob du noch zusätzlich eine Skalierung im Browser aktiv hast. Mit Strg+Mausrad kann man im Browser auch hinein/hinaus zoomen. Mit Strg+0 auf 100% gehen.

Der Browser ist auf 100%

 

[Robinson74]

Wie breit in cm sind deine Bilder, wenn du sie dir auf dem 32" 4K Bildschirm über den Browser anschaust ?

43 bis 44 cm ?

Wenn ja, werde ich meine Vermutung über dein "Problem" äußern ... ( ich habe auch einen 32" 4K Bildschirm )
wenn nein, habe ich keine Vermutung

Gemessen am 4k-Bildschirm ist ein Foto (1600px) ca. 39cm.

 

[rower]

O.K. die 39 cm kann ich jetzt nicht nachvollziehen ...

Bei mir auf dem 32" 4K Bildschirm haben die Bilder eine Breite von 58 cm ...
wenn ich auf das "+" des Mauszeigers klicke :

und weil ich auch das Problem der unscharfen Bilder bei einer Skalierung von 150 % hatte ... habe ich einfach auf 200% skaliert.
Die Bilddateien sind keine Vektordateien ... sondern Dateien mit Einzelpixeln.
Wenn man die mit 150% vergrößert, entstehen aus einem Pixel 1,5 Pixel, aus dem nächsten wieder 1,5 ... und so weiter:
daraus kann dann nur Pixelmatsch entstehen.

Bei einer Vergrößerung / Skalierung von 200% entstehen aus einem Pixel dann 2 Pixel ... und so weiter.
Diese "ganzzahligen Vergrößerungen" vermeiden Pixelmatsch.

Und jaaaaa: die Icons werden größer

 

[Robinson74]

Bei mir wird bei 200% Skalierung (unter Anzeigeeinstellungen in Win10) der Pixelmatch nur noch grösser...

 

[Calle2018]

Die Fotos ist einer anderen Grösse oder in einer höheren Auflösung hochladen?

So etwas? https://internetingishard.com/html-and-css/responsive-images/

 

[creatrix]

Kann man das irgendwie besser lösen? Anderer Browser (meiner ist Google Chrome)?

In Firefox sorgt die Einstellung "Ansicht - Zoom - Nur Text zoomen" dafür, dass die Bilder nicht skaliert werden. Ich gehe davon aus, dass auch andere Browser diese Einstellungsmöglichkeit haben.

 

[beiti]

In Firefox sorgt die Einstellung "Ansicht - Zoom - Nur Text zoomen" dafür, dass die Bilder nicht skaliert werden. Ich gehe davon aus, dass auch andere Browser diese Einstellungsmöglichkeit haben.

Das funktioniert zwar, hilft aber in Bezug auf die eigene Internetseite nicht weiter. Die macht man ja nicht für sich selber, sondern für andere Leute. Selbst wenn man einen Hinweis auf diese Einstellung auf die Seite schreibt, muss man davon ausgehen, dass nur wenige Nutzer ihn beachten.

Abgesehen savon hat die Einstellung den Nachteil, dass die Bilder dann sehr klein werden können. Bei 150 % mag das noch nicht so schlimm sein, aber schon bei 200 % (was heute auch nicht mehr so selten ist) ist das Nicht-Skalieren von Bildern keine Lösung mehr.

Eigentlich will man das ja auch nicht. Also man will nicht, dass die Bilder kleiner werden, nur um scharf zu sein. Man will sie in normaler Größe sehen, und sie sollen trotzdem scharf sein. Das erfordert ein Umdenken beim Webdesign. Ich habe dazu schon mal was geschrieben:

Langfristiges Ziel sollte sein, sämtliche Fotos in einer höheren (z. B. der linear verdoppelten) Auflösung anzulegen. Also wenn das Bild im Web-Layout z. B. mit 800 x 600 Pixeln eingebunden ist, würde man die JPEG-Datei auf 1600 x 1200 Pixel anlegen. So schafft man Schärfe-Reserven für Monitore mit hoher Pixeldichte und hat auf Monitoren mit herkömmlicher 100-%-Skalierung trotzdem keine Nachteile. Man kann nämlich problemlos die JPEG-Kompression stärker machen und somit die Dateigröße auf dem Niveau halten, das man auch für gute Qualität in Standardauflösung gebraucht hätte. Auf Retina-Displays sind die einzelnen Pixel so klein, dass die zusätzlichen JPEG-Artefakte nicht in Erscheinung treten. Runterskaliert auf die Auflösung herkömmlicher Monitore werden sie ohnehin unsichtbar.
Man muss einfach ein bisschen umdenken.
Am einfachsten ist das für Leute, die ihre Webseiten "von Hand" oder mit klassischen HTML-Editoren gestalten. Schwieriger ist es mit Content-Management-Systemen (auch Foren-Systemen), bei deren Entwicklern die Thematik oft noch nicht angekommen ist. Sie unterstützen Retina-Auflösungen entweder gar nicht oder nur per PlugIn - und dann oft wahnwitzig umständlich mit irgendwelchen Browser-Weichen, die zuerst die Pixeldichte des Monitors abrufen und davon ausgehend das Bild in unterschiedlichen Auflösungen übertragen. Diese komplexe Vorgehensweise (die natürlich auch allerhand Fehlerquellen enthält) ist komplett unnötig; die Skalierung in sämtlichen heutigen Browsern funktioniert sehr gut und erfordert keine "Vor-Skalierung".

PS: Ich habe dazu auch einen Vergleich ins Netz gestellt:
http://fotovideotec.de/retina-test/

 

[droehnwood]

Hi,

ich habe gerade auch mal auf deine Seite geschaut.

Vor meiner Nase steht ein 32" UHD Monitor mit der Windows-Skalierung 125%, damit ich die Systemschrift lesen kann.

Deine Seite, dargestellt mit Browser im Vollbild (normal) und ohne Browser-Skalierung, erzeugt ein recht trauriges Bild. Schon auf der Hauptseite ist Links und Rechts viel ungenutzte, graue Fläche. Und wenn man ein Fotos aufruft, dann hat die lange Kante eine Länge von ca. 360mm und nutzt damit die verfügbare Fläche schlecht aus. Bei 100% wird es noch trauriger.

Die Schärfe wirkt mit 100% Skalierung (Windows) und Originalgröße besser, aber das ist ja klar. Wenn ich nun auf die eine oder andere Art zoome, wird es immer unscharf. Was auch sonst?!

Jetzt könnte man natürlich vorschlagen, du mögest bitte deine Bilder mit 4k/UHD Auflösung hinterlegen, damit der Browser selbst die Skalierung machen kann. Oder deine Homepage reagiert responsiv und übernimmt diesen Part. Aber will man seine Werke in druckfähiger Auflösung "frei Haus" auf die Homepage stellen? Will auch nicht jeder...

Ich ärgere mich jedenfalls immer wieder, dass hier im Forum nur kleine Dateianhänge erlaubt sind. Anders herum ist es auch störend, wenn in manchen Fäden die Bilder hochauflösend eingebunden werden, weil es dann zu Lasten der Leserlichkeit geht.

Irgendetwas ist also immer...

Um auf den Punkt zu kommen: 1600x ist ein alter Hut und ungeeignet zum Präsentieren der Qualität deiner Bilder. Setze ein prominentes Wasserzeichen drauf, weise auf deine Rechte hin und stelle sie höher aufgelöst ein.

 

[beiti]

Jetzt könnte man natürlich vorschlagen, du mögest bitte deine Bilder mit 4k/UHD Auflösung hinterlegen, damit der Browser selbst die Skalierung machen kann. Oder deine Homepage reagiert responsiv und übernimmt diesen Part.

Ich habe den Eindruck, dass die Seite des TO schon responsiv arbeitet und automatisch skaliert. Wenn ich das Browserfenster schmäler mache, passt sich alles in der Breite an; dann wirken die Bilder irgendwann auch auf hochauflösenden Monitoren scharf.
Es gibt allerdings eine Maximalgröße, die vermutlich der Originalauflösung der hochgeladenen Dateien entspricht (unter Berücksichtigung der Betriebssystem-Skalierung - also auf hochauflösenden Displays nicht mehr perfekt scharf). Wenn diese Maximalgröße überschritten wird, fügt eine weitere Vergrößerung des Browserfensters nur noch Graufläche hinzu.
Vermutlich könnte der TO die Darstellung verbessern, indem er die Bilder einfach in sehr großen Pixelmaßen hochlädt. Fragt sich nur, ob sich das lohnt. Dass jemand einen 4k-Monitor hat und dort ein Fullscreen-Browserfenster nutzt, dürfte doch eher die Ausnahme sein. Es gibt ja auch sonst kaum Internetseiten, die von dem Platz sinnvoll Gebrauch machen.

 

[Robinson74]

Hi, ich habe gerade auch mal auf deine Seite geschaut...

Danke für dein Feedback!

Grundsätzlich gebe ich dir bei deiner Betrachtungsweise völlig recht: Wenn man mit einem 32-Zöller 4k-Monitor im Vollbild meine Homepage betrachtet, wirken die nicht genutzten seitlichen Bereiche wirklich sehr störend.

Doch wer betrachtet in dieser Konstellation schon eine Homepage? Während ich diese Zeilen schreibe, mache ich das gerade auf meinem 32-Zöller 4k-Monitor. Aber nicht im Vollbild. Das Browserfenster ist nur ca. 40cm gross. Es bringt doch nichts auf Vollbild umzustellen, wenn die meisten Webseiten (wie auch das DSLR-Forum) nicht für Vollbild optimiert sind.

Meine Homepage habe ich versucht für den "Durchschnitt" zu gestalten. Und das ist nach meiner Meinung ein 24-Zöller mit einer Auflösung von 1920 x 1200px. Mit dieser Monitorgrösse sind auch die Fotos mit 1600px schön stimmig im Verhältnis mit dem Monitor (im Vollbild).

 

[Robinson74]

Vermutlich könnte der TO die Darstellung verbessern, indem er die Bilder einfach in sehr großen Pixelmaßen hochlädt.

Das habe ich gerade versucht in einer Test-Galerie: https://www.roger-rubin.com/portfolio/test-galerie/.

Die Fotos sollten nun eigentlich eine Auflösung von 2997 x 2000 px haben. Komischerweise sind die Fotos in der 1:1-Ansicht nur minimal grösser als vorher. Eine Recherche hat ergeben: Mein Homepage-Anbieter (Jimdo) begrenzt die Fotos auf maximal 1820 x 1280 px. Also werden nun alle Fotos in dieser Test-Galerie auf 1820 px heruntergebrochen.

Danke Jimdo...

 

[beiti]

Eine Recherche hat ergeben: Mein Homepage-Anbieter (Jimdo) begrenzt die Fotos auf maximal 1820 x 1280 px.

Tja, das ist die Kehrseite dieser benutzerfreundlichen Homepage-Baukästen: Man verliert viel Einfluss aufs Ergebnis.

Eine Alternative wäre, auf Basis eines CMS wie Wordpress, Joomla oder dergleichen was Eigenes aufzusetzen. Da kann man dann viele Sachen selber einstellen sowie fehlende Funktionen mittels PlugIn nachrüsten. Das braucht aber eine Menge Einarbeitung, und für freie Gestaltung sollte man auch HTML- und CSS-Kenntnisse haben.
Man kann das Einrichten des CMS auch einem Fachmann überlassen, aber das wird dann eine Geldfrage.

Die weitere Alternative sieht so aus, dass man die Homepage komplett selber programmiert (evtl. unter Zuhilfenahme eines guten HTML-Editors, der die Arbeit erträglich macht). Wenn man sich eh schon Kenntnisse in HTML und CSS draufschaffen muss, wäre das für eine persönliche Homepage die konsequente Variante. Der Vorteil wäre, dass man wirklich jedes Detail selber festlegen kann. Aber man bastelt halt auch lang an diversen Browser-Optimierungen rum – also Zeit, die man sonst vielleicht sinnvoller totschlagen könnte.

 

[droehnwood]

Tatsächlich ist mein Browserfenster nicht über die gesamt Breite gezogen, die Höhe hingegen nutze ich schon aus. Und wenn ich mir Bilder ansehe, dann will ich die auch mal größtmöglich ansehen - logisch, oder? Zumindest, wenn sie gut aussehen...

Da ich zu der Windows-Skalierung von 125% im Browser nochmal hochskaliere, um Texte einfacher lesen zu können, erscheinen deine Bild nun schon ganz ordentlich groß und gut.

Ein HD Auflösung als Standard angesehen, scheint die Größenbegrenzung durch deinen Anbieter durchaus nachvollziehbar und sinnvoll. Es geht dann ja auch bei dir irgendwann mal um den verursachten Traffic, der bezahlt werden will.

Also füge dich brav, skaliere deine Bilder genau in dieser Auflösung und schau auch noch mal nach aufgesetzten Kompressionen / Größenlimits bezüglich der Datenmenge. Ggf. haut ja Jimdo da auch noch mal mit dem Hammer drauf. Lieber gleich einmal richtig komprimieren, als ein 2tes Mal. So solltest du dann die beste BQ unter den gegebenen Voraussetzungen erhalten.