: Pixels - A cry for some insight 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

@Nimeshi995

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.


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.

Vote Up Vote Down

@Candy875

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:


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.
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]).
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.

Vote Up Vote Down