Pixels - A cry for some insight

You're confusion lies in the fact that you are incorrect in saying that pixels aren't physical. Physically, your monitor has LEDs of 3 different colors (red, green, blue). Each set of these three colored LEDs is a pixel (how they are arranged can make even this concept much more complicated but lets think of them all being perfectly square and all one unit like those your video card uses).

To complicate this, your video card can send it's video signal to your monitor in a very wide range of resolutions and frequencies and your monitor can choose from a variety of methods for displaying that signal. These are different methods of translating the abstract concept of resolution to the real world concept of pixels. The term resolution can refer to either the video signal or the physical pixels on a display (most often called a 'display resolution'). When used alone it most often referring to a video resolution. A video signal can be transmitted for a wide range of display resolutions but a displays' resolution is fixed by the physical number of pixels.

Answers:

  1. A pixel DOES have a real world constant size. But if the image sent to the display is not the same size as the display any one of these may scale it to fit (in order of priority): the software exe library (eg. DirectX, OpenGL), the OS (usually only for the desktop), the source hardware (eg. video card), the display. Usually, at least one of these will take care of it. If you play with the settings for each of these you may notice slight differences in how they perform that scaling. Typically, the best will be the one with the highest priority; the fastest will have the lowest priority.

  2. Pixel density is a reference to either a physical density (eg 100ppi [physical pixels per inch]) or a relative term to describe how big a printed image would be (eg: normal density [things onscreen are about the same size as they would be printed], high density [things on screen will grow when printed]).

  3. A pixel is a fixed size. Resolution can change though because it typicaly refers to the signal resolution (which isn't always the same as the display resolution). When your signal resolution is lower than your display resolution it will typically be scaled up. When it is higher it may either be cropped or spanned across displays or scaled down.

ADDENDUM:

A. No a display can only physically display what it has pixels to display. BUT, you can send a larger signal to a display and, depending on how it is configured, it will either crop or scale that signal. One thing to keep in mind about the scaling is that it doesn't NEED to be a even; 4x4 physical pixels may represent and area 8x8 or 2.5x3.25 or any variation of virtual space. When the scaling isn't even it won't look as good. This is why you've probably noticed that some resolutions looks much better than others on your displays even though they have lower resolutions. This is due to the fact that those resolutions are able to scale evenly along both the vertical and horizontal axis. In order to scale evenly 1 physical pixel must equal a integral number of virtual pixels (eg: 1:1, 1:2, 1:3, ...)

B. No, pixels vary from display to display. This is why the ppi (pixels per inch matters). retina displays are basically the highest density display right now. Compare that to a typical LED TV and you'll see that even though they may have the same display resolution the physical size is MUCH different.

C. Supposed you had two screens that you wanted to make a simple tic-tac-toe game on. One display was a smart phone and the other was a TV. They both have the same resolution. For this example lets say they both have a resolution of 5x5 (it may help to open a Paint program and draw a 5x5 tic-tac-toe grid). If you wanted to specify this shape on the smart phone using mm for example it may be that you want to draw two vertical lines 10 mm apart. The problem is that on a TV this same grid will require that you space the lines 80mm or further apart. In order to know how far to draw these lines apart you'd need information about the physical pixel size. This information is often not available (or incorrect) in many environments. Even if it is, it is much more difficult to use than pixels are and you'll want to avoid trying to scale using this information unless you have a good reason to. The screens size is not the most relevant thing for a designer. They really just want the information to display; the physical size of that display is irrelevant for the most part but the virtual space is very important. To further help in this regard, these days we have a fairly common resolution of 1080p which most displays support. Because of this, we can even get a good idea of what percentage of the screen is filled by a 800px wide image on the majority of systems (but a good design won't rely on that fact because there are systems where this is very much not true).

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?

This isn't exactly true. We use pixels because they scale better not because they are exactly the same. We choose pixels when we want our layout to look correct across different displays; not to make them look the same on different displays. This is one of the problem with the English language, it is not precise enough once again. People often say that this means they look the 'same' but what we really mean is that it 'scales properly' on different displays. Imagine that you made a site that filled the whole TV screen. Would you really want it to look the 'same' on your smart phone? If so, then you'd need to scroll it over 5 feet or so to see the right edge.

When printing, real world size is often much more important but video devices generally have pixels appropriate for their display size. That is to say larger devices have larger pixels. In the end they are mostly 1080p or close to it these days. Of course there are always those devices which have vastly higher or lower resolutions out there but when they do it is the generally job of the device OS to allow for that to work with 'normal' sized objects on screen.

Although, since we are talking about websites it must be pointed out that most people don't leave a browser full screen unless they are using a mobile device. For websites, it is best that your site look proper no matter what size the window is. This is called responsive design and when your site is responsive it will automatically work well on any screen.

Tags:

Resolution