7

I'm pretty new to web developing and I'd love some clarification. Although reading more than one book on the topic, I cannot seem to wrap my head around the pixel concept. I encounter problems with this issue when trying to use CSS and pixel units for design that fits different screen sizes.

To my understanding a pixel is the most basic unit used by a monitor in order to compose an image on the screen. So if me resolution is 800 by 600, everything on my screen is rendered using those 800*600 basic building blocks. If I were to enlarge my screen resolution, 3 things would accrue:

A. The basic image building block(the pixel) would shrink in size B. The pixels would move close together C. Well, more pixels would now be available

All these combined lead to a sharper(depending on the viewing distance) and more detail enabling image.

Well so far so good. Here is were I start getting lost:

To my knowledge a pixel is not a physical, real object. Monitors are not embedded with a few thousand pixels. I am drawn to this conclusion because anyone can change his screen's resolution, making a pixel on his screen bigger or smaller, and adding or subtracting the amount of total pixels on screen.

Adding to that, I have herd that different monitors have different pixel densities. For example Apple's retina monitors.

Taking all of the above as my knowledge base, These are my questions:

  1. If a pixel has no real world constant size, what does comparing different pixel densities matter? Each screen company can define it's own pixel concept and declare the higher density.

  2. What does a bigger pixel density mean? Say we take two screens with the same physical dimensions, but with a different pixel density, am I to assert that the main difference would be the larger density screen being able to display a higher max resolution? Or am I to assert that given the same resolution on both monitors, the higher density one would display a sharper, smaller image?

  3. If a pixel is not a fixed size within one monitor, is it a fixed size between the same resolution on two different monitors? For example, would two different monitors, set to the same resolution, be comprised of same size, same quantity pixels?

I'd love some help (:

  • This question is not about websites. – Stephen Ostermiller Sep 22 '13 at 2:02
  • I need to understand to concept so that I can design my site with the correct understanding of pixel dimensions...I should have made that point clearer in the post, sorry. – CarrotFile Sep 22 '13 at 13:55
  • I edited that main messages and highlighted the relevance. – CarrotFile Sep 22 '13 at 14:06
  • OK, I re-opened this question. – Stephen Ostermiller Sep 22 '13 at 15:35
7

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. Get it? The screens size is not the most relevant thing for a designer. They really just want the information to display; the size of that display is irrelevant for the most part. It's the pixel space that matters. 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.

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. Image 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.

  • I know is says not to thank someone (why?), but thanks for the effort. I would enjoy further clarification: A. So when I change my OS' display res, I am invoking either an up, or a down scale? I could imagine a downscale being implemented by the screen using two pixels to display as one(correct?), but is it possible for a screen to display a higher res than it's physical pixel count? – CarrotFile Sep 22 '13 at 17:42
  • B.You say a pixel has a constant size. Does this Hold for all screens, no matter what brand or model? I mean is there a standard that all screen makers follow, setting for example a pixel as a 1 inch square? C.I'm guessing the answer to B is "no",meaning there is a verity of sizes for a "pixel".Adding this to the fact that different screens may contain different pixel densities,we arrive at the most important of my questions: Say I am designing a fixed layout, 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? – CarrotFile Sep 22 '13 at 17:42
  • The same layout, using the same pixel dimensions in the css sheet, may have a different real life width and hight (in inches). So why are pixels so commonly used whilst planning for "pixel perfect" designs that render the same across screens? – CarrotFile Sep 22 '13 at 17:43
  • See my updates. – krowe Sep 22 '13 at 19:55
  • Sweet, I want you to know that you really helped me, this is not to be taken for granted. If it is not common to thank, i'm sorry and i'll delete. – CarrotFile Sep 23 '13 at 15:41
1

The operating system must be able to change the resoution, because it must support different displays.

But each LCD monitor has a native resolution, and only when you use this resolution, the picture looks sharp. If you use another resolution, for example 640*480 on a 1024*728 Monitor, then the monitor itself will upscale the picture, so that 1 original pixel will be stretched to ~1.6 pixels on the monitor. Because you cannot show half-pixels on a monitor, the middle point will be interpolated and the picture becomes blurry. This was a bit different on earlier CRT monitors, who did not have a fix defined pixel size.

enter image description here Antialiasing of textes is a good example to show this interpolation, the originally brown font color is here interpolated with the blue background color.

Pixels can be different in size, a high resolution display of a smart phone will have smaller pixels than most PC monitors, so when you use the native resolution on both devices, the picture will be smaller on the smartphone than on the PC monitor.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.