Pixel - Ein Schrei nach Einsicht

7

Ich bin ziemlich neu in der Webentwicklung und würde gerne etwas Klarheit schaffen. Obwohl ich mehr als ein Buch zu diesem Thema lese, kann ich mich nicht um das Pixelkonzept kümmern. Ich habe Probleme mit diesem Problem, wenn ich versuche, CSS und Pixeleinheiten für ein Design zu verwenden, das für verschiedene Bildschirmgrößen geeignet ist.

Nach meinem Verständnis ist ein Pixel die grundlegendste Einheit, die ein Monitor verwendet, um ein Bild auf dem Bildschirm zu erstellen. Wenn meine Auflösung also 800 x 600 beträgt, wird alles auf meinem Bildschirm mit diesen 800 * 600-Grundbausteinen gerendert. Wenn ich meine Bildschirmauflösung vergrößern würde, würden sich drei Dinge ergeben:

A. Der Grundbildbaustein (das Pixel) würde kleiner werden. B. Die Pixel würden sich nahe beieinander bewegen. C. Nun, es wären jetzt mehr Pixel verfügbar

All dies zusammen führt zu einem schärferen (je nach Betrachtungsabstand) und detaillierteren Bild.

Na so weit so gut. Hier fange ich an, mich zu verlaufen:

Meines Wissens ist ein Pixel kein physisches, reales Objekt. Monitore sind nicht mit einigen tausend Pixeln eingebettet. Ich bin zu diesem Schluss gekommen, weil jeder die Auflösung seines Bildschirms ändern kann, indem er ein Pixel auf seinem Bildschirm vergrößert oder verkleinert und die Anzahl der Gesamtpixel auf dem Bildschirm addiert oder subtrahiert.

Hinzu kommt, dass verschiedene Monitore unterschiedliche Pixeldichten haben. Zum Beispiel Apples Netzhautmonitore.

Ausgehend von all dem als meine Wissensbasis sind dies meine Fragen:

  1. Wenn ein Pixel keine konstante Größe in der realen Welt hat, was bedeutet es dann, verschiedene Pixeldichten zu vergleichen? Jede Bildschirmfirma kann ihr eigenes Pixelkonzept definieren und die höhere Dichte deklarieren.

  2. Was bedeutet eine größere Pixeldichte? Angenommen, wir nehmen zwei Bildschirme mit denselben physikalischen Abmessungen, aber mit unterschiedlicher Pixeldichte. Soll ich behaupten, dass der Hauptunterschied darin besteht, dass der Bildschirm mit größerer Dichte eine höhere maximale Auflösung anzeigen kann? Oder soll ich behaupten, dass bei gleicher Auflösung auf beiden Monitoren die höhere Dichte ein schärferes, kleineres Bild anzeigen würde?

  3. Wenn ein Pixel innerhalb eines Monitors keine feste Größe hat, ist es dann eine feste Größe zwischen derselben Auflösung auf zwei verschiedenen Monitoren? Würden beispielsweise zwei verschiedene Monitore, die auf dieselbe Auflösung eingestellt sind, aus derselben Größe und Pixelmenge bestehen?

Ich würde gerne Hilfe bekommen (:

Karottendatei
quelle
Bei dieser Frage geht es nicht um Websites.
Stephen Ostermiller
Ich muss das Konzept verstehen, damit ich meine Site mit dem richtigen Verständnis der Pixelabmessungen gestalten kann ... Ich hätte diesen Punkt in der Post klarer machen sollen, sorry.
CarrotFile
Ich habe diese Hauptnachrichten bearbeitet und die Relevanz hervorgehoben.
CarrotFile
OK, ich habe diese Frage erneut geöffnet.
Stephen Ostermiller

Antworten:

7

Ihre Verwirrung liegt in der Tatsache, dass Sie zu Unrecht sagen, dass Pixel nicht physisch sind. Ihr Monitor verfügt physisch über LEDs in 3 verschiedenen Farben (rot, grün, blau). Jeder Satz dieser drei farbigen LEDs ist ein Pixel (wie sie angeordnet sind, kann sogar dieses Konzept viel komplizierter machen, aber wir können uns vorstellen, dass sie alle perfekt quadratisch sind und alle eine Einheit wie die, die Ihre Grafikkarte verwendet).

Um dies zu erschweren, kann Ihre Grafikkarte das Videosignal in einem sehr großen Bereich von Auflösungen und Frequenzen an Ihren Monitor senden, und Ihr Monitor kann aus einer Vielzahl von Methoden zur Anzeige dieses Signals auswählen. Dies sind verschiedene Methoden, um das abstrakte Konzept der Auflösung in das reale Konzept der Pixel zu übersetzen. Der Begriff Auflösung kann sich entweder auf das Videosignal oder die physischen Pixel auf einer Anzeige beziehen (am häufigsten als "Anzeigeauflösung" bezeichnet). Wenn es alleine verwendet wird, bezieht es sich meistens auf eine Videoauflösung. Ein Videosignal kann für einen weiten Bereich von Anzeigeauflösungen übertragen werden, die Auflösung eines Displays wird jedoch durch die physikalische Anzahl von Pixeln festgelegt.

Antworten:

  1. Ein Pixel hat eine konstante Größe in der realen Welt. Wenn das an das Display gesendete Bild jedoch nicht die gleiche Größe wie das Display hat, kann eines davon das Bild entsprechend skalieren (in der Reihenfolge der Priorität): die Software-Exe-Bibliothek (z. B. DirectX, OpenGL), das Betriebssystem (normalerweise nur für der Desktop), die Quellhardware (z. B. Grafikkarte), das Display. Normalerweise kümmert sich mindestens einer davon darum. Wenn Sie mit den Einstellungen für jede dieser Einstellungen spielen, stellen Sie möglicherweise geringfügige Unterschiede in der Durchführung dieser Skalierung fest. In der Regel ist das Beste dasjenige mit der höchsten Priorität. Der schnellste hat die niedrigste Priorität.

  2. Die Pixeldichte bezieht sich entweder auf eine physikalische Dichte (z. B. 100 ppi [physikalische Pixel pro Zoll]) oder auf einen relativen Begriff, um zu beschreiben, wie groß ein gedrucktes Bild sein würde (z. B. normale Dichte [Dinge auf dem Bildschirm sind ungefähr so ​​groß wie sie wären) gedruckt], hohe Dichte [Dinge auf dem Bildschirm wachsen beim Drucken]).

  3. Ein Pixel hat eine feste Größe. Die Auflösung kann sich jedoch ändern, da sie sich normalerweise auf die Signalauflösung bezieht (die nicht immer mit der Bildschirmauflösung übereinstimmt). Wenn Ihre Signalauflösung niedriger als Ihre Bildschirmauflösung ist, wird sie normalerweise vergrößert. Wenn es höher ist, kann es entweder beschnitten oder über Displays verteilt oder verkleinert werden.

NACHTRAG:

A. Nein, eine Anzeige kann nur physisch anzeigen, welche Pixel angezeigt werden sollen. ABER Sie können ein größeres Signal an ein Display senden und je nach Konfiguration wird dieses Signal entweder zugeschnitten oder skaliert. Eine Sache, die Sie bei der Skalierung beachten sollten, ist, dass sie nicht gerade sein muss. Physische 4x4-Pixel können einen Bereich von 8x8 oder 2,5x3,25 oder eine beliebige Variation des virtuellen Raums darstellen. Wenn die Skalierung nicht einmal ist, sieht sie nicht so gut aus. Aus diesem Grund haben Sie wahrscheinlich bemerkt, dass einige Auflösungen auf Ihren Displays viel besser aussehen als andere, obwohl sie niedrigere Auflösungen haben. Dies liegt an der Tatsache, dass diese Auflösungen sowohl entlang der vertikalen als auch der horizontalen Achse gleichmäßig skaliert werden können. Um gleichmäßig zu skalieren, muss 1 physisches Pixel einer ganzzahligen Anzahl virtueller Pixel entsprechen (z. B. 1: 1, 1: 2, 1: 3, ...).

B. Nein, die Pixel variieren von Anzeige zu Anzeige. Aus diesem Grund ist der ppi (Pixel pro Zoll wichtig). Retina-Displays sind derzeit im Grunde die Displays mit der höchsten Dichte. Wenn Sie das mit einem typischen LED-Fernseher vergleichen, werden Sie feststellen, dass die physische Größe VIEL unterschiedlich ist, obwohl sie möglicherweise dieselbe Bildschirmauflösung haben.

C. Angenommen, Sie hatten zwei Bildschirme, auf denen Sie ein einfaches Tic-Tac-Toe-Spiel erstellen wollten. Ein Display war ein Smartphone und das andere war ein Fernseher. Sie haben beide die gleiche Auflösung. In diesem Beispiel haben beide eine Auflösung von 5 x 5 (es kann hilfreich sein, ein Malprogramm zu öffnen und ein 5 x 5-Tic-Tac-Toe-Raster zu zeichnen). Wenn Sie diese Form auf dem Smartphone beispielsweise mit mm angeben möchten, möchten Sie möglicherweise zwei vertikale Linien im Abstand von 10 mm zeichnen. Das Problem ist, dass bei einem Fernsehgerät für dasselbe Raster die Zeilen mindestens 80 mm voneinander entfernt sein müssen. Um zu wissen, wie weit diese Linien auseinander gezogen werden müssen, benötigen Sie Informationen zur physischen Pixelgröße. Diese Informationen sind in vielen Umgebungen häufig nicht verfügbar (oder falsch). Selbst wenn es so ist, ist es viel schwieriger zu verwenden als Pixel und Sie ' Ich möchte vermeiden, mit diesen Informationen zu skalieren, es sei denn, Sie haben einen guten Grund dafür. Die Bildschirmgröße ist für einen Designer nicht das Relevanteste. Sie möchten wirklich nur, dass die Informationen angezeigt werden. Die physische Größe dieser Anzeige ist größtenteils irrelevant, aber der virtuelle Raum ist sehr wichtig. Um diesbezüglich weiter zu helfen, haben wir heutzutage eine ziemlich übliche Auflösung von 1080p, die von den meisten Displays unterstützt wird. Aus diesem Grund können wir sogar eine gute Vorstellung davon bekommen, wie viel Prozent des Bildschirms auf den meisten Systemen von einem 800 Pixel breiten Bild ausgefüllt werden (aber ein gutes Design wird sich nicht auf diese Tatsache stützen, da es Systeme gibt, in denen dies sehr wichtig ist nicht wahr). Die physische Größe dieser Anzeige ist größtenteils irrelevant, aber der virtuelle Raum ist sehr wichtig. Um diesbezüglich weiter zu helfen, haben wir heutzutage eine ziemlich übliche Auflösung von 1080p, die von den meisten Displays unterstützt wird. Aus diesem Grund können wir sogar eine gute Vorstellung davon bekommen, wie viel Prozent des Bildschirms auf den meisten Systemen von einem 800 Pixel breiten Bild ausgefüllt werden (aber ein gutes Design wird sich nicht auf diese Tatsache stützen, da es Systeme gibt, in denen dies sehr wichtig ist nicht wahr). Die physische Größe dieser Anzeige ist größtenteils irrelevant, aber der virtuelle Raum ist sehr wichtig. Um diesbezüglich weiter zu helfen, haben wir heutzutage eine ziemlich übliche Auflösung von 1080p, die von den meisten Displays unterstützt wird. Aus diesem Grund können wir sogar eine gute Vorstellung davon bekommen, wie viel Prozent des Bildschirms auf den meisten Systemen von einem 800 Pixel breiten Bild ausgefüllt werden (aber ein gutes Design wird sich nicht auf diese Tatsache stützen, da es Systeme gibt, in denen dies sehr wichtig ist nicht wahr).

Why is it right to use pixel measurements and expect the layout to look exactly the same on all screens using a certain common res?

Das ist nicht genau richtig. Wir verwenden Pixel, weil sie besser skalieren, nicht weil sie genau gleich sind. Wir wählen Pixel aus, wenn unser Layout auf verschiedenen Displays korrekt aussehen soll. damit sie auf verschiedenen Displays nicht gleich aussehen. Dies ist eines der Probleme mit der englischen Sprache, es ist noch einmal nicht präzise genug. Die Leute sagen oft, dass dies bedeutet, dass sie gleich aussehen, aber wir meinen wirklich, dass es auf verschiedenen Displays richtig skaliert. Stellen Sie sich vor, Sie haben eine Site erstellt, die den gesamten Fernsehbildschirm ausfüllt. Möchten Sie wirklich, dass es auf Ihrem Smartphone gleich aussieht? Wenn ja, müssen Sie über 5 Fuß scrollen, um den rechten Rand zu sehen.

Beim Drucken ist die Größe der realen Welt oft viel wichtiger, aber Videogeräte haben im Allgemeinen Pixel, die für ihre Anzeigegröße geeignet sind. Das heißt, größere Geräte haben größere Pixel. Am Ende sind sie heutzutage meistens 1080p oder nahe daran. Natürlich gibt es immer Geräte mit erheblich höheren oder niedrigeren Auflösungen, aber wenn sie dies tun, ist es im Allgemeinen Aufgabe des Gerätebetriebssystems, dies für Objekte mit "normaler" Größe auf dem Bildschirm zu ermöglichen.

Da es sich jedoch um Websites handelt, muss darauf hingewiesen werden, dass die meisten Benutzer einen Browser nur dann im Vollbildmodus verlassen, wenn sie ein mobiles Gerät verwenden. Für Websites ist es am besten, dass Ihre Website unabhängig von der Größe des Fensters richtig aussieht. Dies wird als Responsive Design bezeichnet. Wenn Ihre Site reagiert, funktioniert sie automatisch auf jedem Bildschirm.

Krowe
quelle
Ich weiß, es heißt, sich nicht bei jemandem zu bedanken (warum?), Aber danke für die Mühe. Ich würde mich über weitere Erläuterungen freuen: A. Wenn ich also die Bildschirmauflösung meines Betriebssystems ändere, rufe ich entweder eine Aufwärts- oder eine Abwärtsskala auf? Ich könnte mir vorstellen, dass eine Verkleinerung durch den Bildschirm implementiert wird, wobei zwei Pixel als eins angezeigt werden (richtig?), Aber kann ein Bildschirm eine höhere Auflösung als die physische Pixelanzahl anzeigen?
CarrotFile
B. Sie sagen, ein Pixel hat eine konstante Größe. Gilt dies für alle Bildschirme, unabhängig von Marke oder Modell? Ich meine, gibt es einen Standard, dem alle Bildschirmhersteller folgen und der beispielsweise ein Pixel als 1-Zoll-Quadrat festlegt? C. Ich vermute, die Antwort auf B ist "Nein", was bedeutet, dass es eine Vielzahl von Größen für ein "Pixel" gibt. Hinzu kommt, dass verschiedene Bildschirme unterschiedliche Pixeldichten enthalten können, kommen wir zu dem wichtigsten meiner Fragen: Angenommen, ich entwerfe ein festes Layout. Warum ist es richtig, Pixelmessungen zu verwenden und zu erwarten, dass das Layout auf allen Bildschirmen mit einer bestimmten gemeinsamen Auflösung genau gleich aussieht?
CarrotFile
Das gleiche Layout mit denselben Pixelabmessungen im CSS-Blatt kann eine andere tatsächliche Breite und Höhe (in Zoll) haben. Warum werden Pixel so häufig verwendet, wenn "pixelgenaue" Designs geplant werden, die auf allen Bildschirmen gleich wiedergegeben werden?
CarrotFile
Siehe meine Updates.
Krowe
Süß, ich möchte, dass du weißt, dass du mir wirklich geholfen hast, das ist nicht selbstverständlich. Wenn es nicht üblich ist, sich zu bedanken, tut es mir leid und ich werde löschen.
CarrotFile
1

Das Betriebssystem muss in der Lage sein, die Auflösung zu ändern, da es verschiedene Anzeigen unterstützen muss.

Jeder LCD-Monitor hat jedoch eine native Auflösung. Nur wenn Sie diese Auflösung verwenden, sieht das Bild scharf aus. Wenn Sie eine andere Auflösung verwenden, z. B. 640 * 480 auf einem 1024 * 728-Monitor, skaliert der Monitor selbst das Bild, sodass 1 Originalpixel auf ~ 1,6 Pixel auf dem Monitor gestreckt wird. Da Sie auf einem Monitor keine halben Pixel anzeigen können, wird der Mittelpunkt interpoliert und das Bild wird unscharf. Dies war bei früheren CRT-Monitoren etwas anders, bei denen die Pixelgröße nicht fest definiert war.

Geben Sie hier die Bildbeschreibung ein Antialiasing von Texten ist ein gutes Beispiel, um diese Interpolation zu zeigen. Die ursprünglich braune Schriftfarbe wird hier mit der blauen Hintergrundfarbe interpoliert.

Pixel können unterschiedlich groß sein. Ein hochauflösendes Display eines Smartphones hat kleinere Pixel als die meisten PC-Monitore. Wenn Sie also die native Auflösung auf beiden Geräten verwenden, ist das Bild auf dem Smartphone kleiner als auf dem PC-Monitor.

martinstoeckli
quelle