Irgendwann kommt man beim Webdesign (aber sicher auch bei normaler Softwareentwicklung) zum Thema hochauflösende Displays, z. B. Retina-Displays von Apple. Diese haben eine doppelt so hohe Pixeldichte wie normale Displays (192 dpi statt 96 dpi). 1,5- und 3-fache Dichte sind wohl auch möglich (vmtl. auch Werte dazwischen).
Nun habe ich bereits gelernt, dass man Bilder auf Websites, sollten diese Pixelgrafiken sein (also keine Vektoren), für Retina-Displays zusätzlich in doppelt so hoher Auflösung zur Verfügung stellen soll, damit diese nicht unscharf werden. Soweit, so gut. Nun habe ich aber ein Verständnisproblem. Diese Fragen stelle ich mir:
Wenn ich nun z. B. einen 24"-Monitor mit 1920x1080 Pixeln und einer normalen (1-fachen) Pixeldichte habe und daneben einen gleich großen Monitor, aber mit doppelter Pixeldichte, welche Auflösung hat dann dieser andere Monitor? Auch 1920x1080? Oder 3840x2160? Ich würde ersteres vermuten, denn warum dann nicht gleich einen 4K-Monitor mit 1-facher Pixeldichte kaufen, der diesselbe Auflösung hat?
Nun gehe ich im Moment also davon aus, dass die Auflösung identisch ist. Wenn ich nun in einer Software oder über eine Website die Auflösung abrufe, erhalte ich dann ebenfalls die 1920x1080 Pixel? Oder wird diese verdoppelt angezeigt? Bestimmt erhalte ich aber die Pixeldichte, z. B. "2".
Wenn die Auflösung sowohl im Betriebssystem als auch abrufbar per Software 1920x1080 Pixel ist und alle Inhalte dann komplett intern auf die doppelte Größe skaliert werden, um die physikalischen Pixel auszufüllen, so verstehe ich nicht, warum Bilder auf Websites dann unscharf werden. Denn das Bild hat in cm gemessen immer noch dieselbe Breite auf dem Monitor.
Sollte die Auflösung des Displays aber doch doppelt so hoch sein, was passiert dann bei einer Website? Erkennt der Browser oder das Betriebssystem, dass die Pixeldichte z. B. 2-fach ist und skaliert alles hoch, also doppelt so groß? Wäre dann also unterm Strich in cm gemessen genau so groß wie auf dem normalen Monitor, aber Bilder sind unscharf.
Ein Problem ist auch, wie ich das ganze ohne Retina-Display testen bzw. simulieren kann. Man kann in Firefox den Wert
Wie ihr seht, bin ich etwas verwirrt.
Leider habe ich bisher keine verständliche Erklärung dieses Sachverhalts gefunden.
Nun habe ich bereits gelernt, dass man Bilder auf Websites, sollten diese Pixelgrafiken sein (also keine Vektoren), für Retina-Displays zusätzlich in doppelt so hoher Auflösung zur Verfügung stellen soll, damit diese nicht unscharf werden. Soweit, so gut. Nun habe ich aber ein Verständnisproblem. Diese Fragen stelle ich mir:
Wenn ich nun z. B. einen 24"-Monitor mit 1920x1080 Pixeln und einer normalen (1-fachen) Pixeldichte habe und daneben einen gleich großen Monitor, aber mit doppelter Pixeldichte, welche Auflösung hat dann dieser andere Monitor? Auch 1920x1080? Oder 3840x2160? Ich würde ersteres vermuten, denn warum dann nicht gleich einen 4K-Monitor mit 1-facher Pixeldichte kaufen, der diesselbe Auflösung hat?
Nun gehe ich im Moment also davon aus, dass die Auflösung identisch ist. Wenn ich nun in einer Software oder über eine Website die Auflösung abrufe, erhalte ich dann ebenfalls die 1920x1080 Pixel? Oder wird diese verdoppelt angezeigt? Bestimmt erhalte ich aber die Pixeldichte, z. B. "2".
Wenn die Auflösung sowohl im Betriebssystem als auch abrufbar per Software 1920x1080 Pixel ist und alle Inhalte dann komplett intern auf die doppelte Größe skaliert werden, um die physikalischen Pixel auszufüllen, so verstehe ich nicht, warum Bilder auf Websites dann unscharf werden. Denn das Bild hat in cm gemessen immer noch dieselbe Breite auf dem Monitor.
Sollte die Auflösung des Displays aber doch doppelt so hoch sein, was passiert dann bei einer Website? Erkennt der Browser oder das Betriebssystem, dass die Pixeldichte z. B. 2-fach ist und skaliert alles hoch, also doppelt so groß? Wäre dann also unterm Strich in cm gemessen genau so groß wie auf dem normalen Monitor, aber Bilder sind unscharf.
Ein Problem ist auch, wie ich das ganze ohne Retina-Display testen bzw. simulieren kann. Man kann in Firefox den Wert
layout.css.devPixelsPerPx
auf 2 stellen (Standardwert ist -1). Dann ist der ganze FF inkl. Website doppelt so groß. Nun ist natürlich das Bild unscharf, da auf 200% skaliert. Aber so groß wird doch auf dem Retina-Monitor der Browser bestimmt nicht dargestellt. Also zoome ich die Seite auf 50%. Nun ist das Bild wieder normal. Warum jetzt also nochmal ein doppelt so hoch aufgelöstes Bild verwenden?Wie ihr seht, bin ich etwas verwirrt.
Leider habe ich bisher keine verständliche Erklärung dieses Sachverhalts gefunden.