Verständnisproblem: Webdesign und Retina-Displays

  • Allgemein

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Verständnisproblem: Webdesign und Retina-Displays

    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 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.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Hi,

    DPI bedeuted ja DotsPerInch, also PunkteProZoll. Hast du nun zwei 20" Displays, einen mit 96 DPI, einen mit 192 DPI, hat der mit dem doppelten DPI-Wert auch eine doppelt so hohe MaximaleAuflösung. Es sind ja auf der gleichen Fläche doppelt so viele Pixel pro Spalte und Zeile vorhanden. Hat man aber die doppelte Auflösung beim 192er eingestellt, würde ein gleich grosses Bild auf dem 192er also eine optisch btw. reale (nicht Pixel) kleinere Fläche brauchen um jeden Pixel des Bildes darzustellen, folglich muss es vergrössert werden um optisch gleich gross auf dem Display dargestellt zu werden, wodurch es unscharf werden kann.

    Marcus Gräfe schrieb:

    warum dann nicht gleich einen 4K-Monitor mit 1-facher Pixeldichte kaufen, der diesselbe Auflösung hat?


    Weil ein noch feineres Bild auf kleinerer Fläche möglich ist. Denke mal an Full-HD-Displays bei Smartphones, glaube nicht das du dafür ein Phone in Tablet-Size haben möchtest. ^^

    Schau mal hier vorbei, um zu schauen wie man den DPI-Wert in CSS via Media-Rule handeln kann.
    css-tricks.com/snippets/css/retina-display-media-query/

    evtl. auch mal Punktdichte im Wikipedia:
    de.wikipedia.org/wiki/Punktdichte
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „NoIde“ ()

    NoIde schrieb:

    hat der mit dem doppelten DPI-Wert auch eine doppelt so hohe MaximaleAuflösung

    Sehe ich das richtig, dass sich die Pixeldichte immer aus Bildschirmgröße und Auflösung bestimmt? Also dass ein 55"-TV mit Full-HD eine sehr geringe Pixeldichte (spricht Pixel weit auseinander), ein 24"-Full-HD-Monitor eine "normale" Pixeldichte und ein Tablet mit dieser Auflösung eine hohe Pixeldichte hat?

    NoIde schrieb:

    folglich muss es vergrössert werden um optisch gleich gross auf dem Display dargestellt zu werden, wodurch es unscharf werden kann


    Da liegt evtl. ein Großteil meiner Verwirrung. Warum wird das Bild vergrößert? Wer entscheidet das? Der Browser? Das Betriebssystem? Oder gar das Display? Und wie bestimmt sich der Vergrößerungsfaktor? Wird es quasi auf 96 dpi umgerechnet?

    Ich selbst habe ein 10"-Tablet, welches laut Hersteller eine Pixeldichte von 300 dpi (eigentlich ppi) hat. Wenn ich eine Website aufrufe, die nicht Retina-optimiert ist, so sind die Bilder aber nicht wirklich unschärfer.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Also den Zusammenhang der Pixeldichte, der max. Auflösung und der Displaygrösse hast du richtig erkannt. Wobei die Pixel nicht unbedingt weiter auseinander sind, der Abstand von Mitte zu Mitte der Pixel allerdings schon.

    Also die Geräte rechnen die Grafiken automatisch um, genau so wie z.B. einige im CSS3 festgelegten Sachen wo Werte in Pixel angegeben werden können(dicke von Bordern z.B. oder grösse von DIVs). Bei der Umrechnung(hochskalieren) der Bilder kommt es zum Qualitätsverlust, auch wenn man diesen nicht immer sehen/wahrnehmen kann. Durch die doppelte Anzahl an Pixeln pro Zeile und Spalte sind es dann ja 4 mal so viele Pixel insgesamt, folglich verliert das Bild an Schärfe da viele Pixel interpoliert werden müssen. Liegt aber ein doppelt so grosses Bild vor, gibt es keine fehlenden Pixel welche interpoliert werden, wodurch es Scharf dargestellt wird. Der Trick hierbei ist, bei normalen Displays die Grafik kleiner anzuzeigen als sie ist. Also bei 96dpi Displays wo Bilder z.B. mit 100x100 px angezeigt werden, nimmst du ein Bild mit 200x200 px (oder 400x400 px), dadurch muss das Bild dann bei den Retinas nicht hochskaliert werden und bleibt scharf. Der DPI-Wert der Bilder bleibt unangetastet, es wird nur hochskaliert, falls Bilder zu klein sind.

    An den Wert der Pixel-Ratio(Umrechnungsfaktor) kommst du so:
    Die tatsächlich dargestellten Pixel sagen wir 400px breite sollen auf einem Display das 600px waagerecht hat in voller Breite angezeigt werden, so rechnest du dann 800/400=1.5, somit ist die Pixelratio = 1.5.

    Wobei man auch sagen könnte da auf 96DPI nicht hochskaliert wird, bei 192DPI die grösse verdoppelt wird, 192/96=2.

    Zusammen mit der Pixelratio und den DPI-Wert kannst du auch passende MediaRules/Queries anlegen.

    CSS-Quellcode

    1. @media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}
    2. @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 196dpi) {}
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „NoIde“ ()

    Meine hoffentlich letzten Fragen zum Thema. ;)

    NoIde schrieb:

    Wobei die Pixel nicht unbedingt weiter auseinander sind

    Ich gehe nun davon aus, dass die kleinste Einheit des Displays dann entsprechend größer oder kleiner ist, also mal ist der Pixel 0,0001 cm groß und mal 0,01 cm (als Beispiel), richtig?

    NoIde schrieb:

    Also die Geräte rechnen die Grafiken automatisch um

    Welches Gerät denn? Computer oder Display? Oder doch Betriebssystem? Angenommen ich habe ein Retina-Display mit einer (vielleicht Zukunftsmusik) Pixeldichte von 384 dpi am PC und Windows 3.1. Ist das ganze OS nun Briefmarkengroß oder skaliert das Display alles 4-fach hoch (davon ausgehend, dass das Display nicht so eingestellt ist, dass alles immer Vollbild ist)?

    NoIde schrieb:

    bei 192DPI die grösse verdoppelt wird

    Nur noch mal zur Sicherheit die Frage: 96 dpi ist immer die zugrunde liegende Pixeldichte? Bei einem 72-dpi-Monitor wird also entsprechend runterskaliert?

    Grundsätzlich habe ich folgende Information verstanden, die letztendlich das wichtige zu sein scheint: Websites sind auf einen Minidisplay mit hoher Auflösung vom Prinzip her optisch genau so groß wie auf einem großen Monitor, weil sonst z. B. auf einem Tablet eine Seite (oder Grafik) aufgrund der Winzigkeit nicht erkennbar wäre. Im Umkehrschluss dürfte dann aber auf einem 55"-Full-HD-TV eine Website mit z. B. 1000 Pixeln Seitenbreite nicht fast die Hälfte des Monitors einnehmen, sondern nur ca. ein Viertel (1920x1080 bei 55" ergeben 41 dpi, 41/96=0,43) . Oder bin ich wieder auf dem Holzweg? ?( EDIT: Äh, Moment, 0,4 sind ja nicht 1/4... Häh? :D
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Mit der Grösse der Pixel hast du recht.

    Marcus Gräfe schrieb:

    Welches Gerät denn? Computer oder Display?


    Ich habe gelesen das die Geräte es machen, wo an welcher stelle kann ich nicht sagen, wobei Geräte sowohl Smartphone, DesktopPc inkl. Display, oder auch nur die Displays gemeint sein können. Da auch die OS's auf Phones wie Rechner laufen kann es auch hier geschehen(wobei das aus meiner Sicht am sinnvollsten wäre), ich versuche noch mal die Quelle zu finden...

    Marcus Gräfe schrieb:

    Bei einem 72-dpi-Monitor wird also entsprechend runterskaliert?


    Ich halte es für möglich, hängt von Hard-/Soft-ware ab. Wenn nicht würde es nur grösser angezeigt werden als bei 96DPI.

    Marcus Gräfe schrieb:

    Holzweg?


    Also eine Gesamtbreite von 1920px worauf 1000px breit etwas angezeigt wird nimmt mehr als die hälfte ein. 100% / 1920px * 1000px = ~52,08%. Wenn also ein TV 55" in der Diagonalen hat bei einer AscpectRatio von 16:9, dann hat er in der Breite etwa ~48" (~48" x ~27"). Also 1920 / 48 = 40 DPI. Die pixelratio ist dann 40 / 96 = ~0.42. Um ein Bild also gleich gross wie auf einem 96DPI Display anzuzeigen, müsstest du rechnen Bildbreite * 0.42 für breite und Bildhöhe * 0.42 für höhe.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Um ein Bild also gleich gross wie auf einem 96DPI Display anzuzeigen, müsstest du rechnen

    OK, also dann ist es wie von mir vermutet nur noch ca. ein Viertel breit, weil vorher war es nur die Hälfte und das mal 0,42 halbiert das Ganze nochmal (wenn man's großzügig auf 0,5 aufrundet). Aber die Frage war eher, ob der Fernseher das auch so macht, sofern er wie z. B. ein modernes Tablet arbeitet. Also rein von der Theorie her, würde der TV-Browser meine 1000px breite Website auf ca. ein Viertel der Fernseherbreite bringen? Nur dann hätte ich es kapiert. ;)

    Ich habe hier übrigens eine interessante Seite zum Thema gefunden:
    html5rocks.com/en/mobile/high-dpi/

    Noch eine wichtige Frage, die sich mir stellte, nachdem ich die verlinkte Seite gelesen habe:
    Es wird da von echten und virtuellen Pixeln gesprochen. Ein iPhone ohne Retina hat z. B. 320 Pixel Breite, eins mit Retina 640, wobei es trotzdem 320 virtuelle Pixel sind. Meine Frage ist nun, das kann ich leider nicht testen, was die folgende Anweisung auf einem Retina-Display macht:

    CSS-Quellcode

    1. @media (min-width: 640px) { /* Zeugs... */ }

    Greift diese auf dem Retina-iPhone oder nicht? Denn die tatsächliche Auflösung ist natürlich 640 Pixel, also müsste diese greifen.
    EDIT #1: Wenn diese greift, gibt es ein Problem. Nämlich dass das Minismartphone die Desktopversion der Website sieht, die dann viel zu klein groß ist.
    EDIT #2: Wenn ich in Chrome z. B. ein iPhone X in der Entwicklertoolssektion wähle und mydevice.io/ aufrufe, so wird mir 375px Breite bei einer Pixeldichte von 3 angezeigt. Wenn das echte iPhone auch so reagiert, so wäre das gut, weil die abfragbare Auflösung auf jeden Fall Handy-Abmessungen hat. D. h. ich kann erkennen, ob man auf einem Handy online ist. Nur Bilder müsste man entsprechend noch höher aufgelöst bereitstellen, damit die Dichte von 3x ausgenutzt wird.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Ich würde jetzt vermuten das es greift, evtl. auch die PixelRatio angeben, 2 für retina.
    @media (min-width: 320px), (-webkit-min-device-pixel-ratio: 1) {}
    @media (min-width: 640px), (-webkit-min-device-pixel-ratio: 2) {}

    Aber mit dem viertel ist mir schleierhaft ?( Wenn auf einem 40 DPI-Display etwas mit einer Breite von 1000px angezeigt wird, rechnen wir so:
    1000px / 40dpi = 25", es werden also 25" von 48" gebraucht.
    Rechnen wir nun 100% / 48" * 25" = ~52.08%(wieder)
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    NoIde schrieb:

    ~52.08%(wieder)

    Somit belegt die 1000px breite Website auf dem 55"-TV genau so die Hälfte wie auf dem 24"-Monitor? Belegt dann diese Website auch die Hälfte des 5"-Smartphones, welches die gleiche FHD-Auflösung hat? Weil ich dachte, es wird alles hochskaliert. Mein Tablet mit 2560 Pixel Breite zeigt die Seite nicht in winzig klein an, sondern hat diese fast auf Bildschirmgröße skaliert. Die Verwirrung steigt...
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Marcus Gräfe schrieb:

    Mein Tablet mit 2560 Pixel Breite zeigt die Seite nicht in winzig klein an, sondern hat diese fast auf Bildschirmgröße skaliert.


    Browser-Zoom bzw. generelle Bildschirm-Skalierung sind deaktiviert/100% ?

    Komischerweise werden manchmal bei Tablets o.ä. Websites "Benutzerfreundlicher" angezeigt.

    LG, Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:
    Der Browser-Zoom steht auf 100%. Weitere Zoom- bzw. Skalierungsfunktionen sind mir nicht bekannt. Das Tablet nutzt Chrome unter Android.

    Wenn ich die Option "Desktopversion anfordern" aktiviere, so ist keine Änderung festzustellen. EDIT: Stimmt nicht ganz, die Schrift im Hauptbereich der Seite wird bei Desktop größer, warum auch immer.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Im Grunde ist es einfach, du stellst es dir vermutlich nur zu kompliziert vor.

    Marcus Gräfe schrieb:

    Somit belegt die 1000px breite Website auf dem 55"-TV genau so die Hälfte wie auf dem 24"-Monitor?


    Marcus Gräfe schrieb:

    Belegt dann diese Website auch die Hälfte des 5"-Smartphones, welches die gleiche FHD-Auflösung hat?


    Bei gleicher Auflösung sollte es so sein, ist nicht abhängig vom DPI-Wert. Würde bei doppeltem DPI-Wert und doppelter Auflösung(wie auch nur bei doppelter Auflösung) nicht die groesse verdoppelt, dann würde die 1000px-Seite etwa 25% der Breite des Retinas einehmen. Ha, nun haben wir doch noch 1/4.

    Nach mal Edit: @Marcus Gräfe lass dich nicht vom DPI in die irre führen, der Wert sagt nur auf einer Strecke von 1" sind n Pixel. Damit die Displays nicht nur halb so gross sind wie ein normaler 24" Display(12" würden ja schon reichen um die gleiche AnzahlPixel unterzubringen bei doppelter DPI), haben die auch eine entsprechend höhere Auflösung.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von „NoIde“ ()

    OK, danke soweit. Ich denke, nun müsste ich die Grundlagen verstanden haben. ;)

    Wobei ich nicht ausschließen möchte, dass ich hierzu noch Fragen haben werde.

    Ich habe eine Grafik auf der aktuell von mir bearbeiteten Website nun auf doppelte Seitenlänge gebracht und gleichzeitig die Qualität (JPEG) halbiert, damit Mobiluser keine erhöhten Ladezeiten haben und Retina-User trotzdem was Schönes sehen (eingebunden wird das 600er Bild aber nach wie vor als 300er). Trotz der deutlich schlechteren Qualität sieht es auf normalen und Retina-Screens besser aus als vorher.

    Habe hier übrigens noch einen guten, wenn auch etwas veralteten Artikel gefunden, der mir noch ein paar Infos geben konnte: blog.kulturbanause.de/2012/04/…splays-retina-optimieren/
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum