##	When is a Pixel Not a Pixel?

Posted on Friday, 23rd October 2015 by admin	

Well, that depends largely on what you mean by a pixel.

In this age of responsive design, high resolution displays, oddly sized mobile devices, and general confusion regarding screen size, this tiny article seeks to make at least one simple point: pixels aren’t what they used to be.

### TL;DR

Historically, a pixel is a picture element. Roughly, and, for a long time, a dot on the screen. The density of these dots varies, and the introduction of colour, made up of three coloured dots, complicates things.

For a while in the modern era (when the Macintosh was introduced in 1984), pixel density was about 72 to the inch [^inch] (2.54 cm). Windows adopted a virtual resolution of 96 to the inch: an inch on the screen comprised 96 pixels, but was actually about 25% bigger than an actual inch. This, of course created a good deal of confusion.

[^inch]: While most of the world has abandoned the inch — or never used it — in favour of the metric system, it is still routinely used in measuring screen and print sizes.

When the dust settled, it turned out that it didn’t actually matter how many pixels there were to the inch, or how high is your screen resolution: what you needed was a reliable way of specifying the measurement you wanted.

If you look hard enough on the Web, you will find all sorts of discussions about viewports and the like, but the reality is much simpler than that:

### A Pixel is Just a Pixel

Forget where the word comes from [^foot]. Today, a pixel is another arbitrary unit of measurement, just like inches, centimetres and points. From a CSS perspective:

1″ = 72pt = 96px = 2.54cm

This is also true in HTML. When you specify the `width` and `height` of an image, for example, it is always in pixels, even though you don’t specify the units. This will print out at 96 pixels per inch.

The Moral

[^foot]: The _foot_ used to measure distances, derives from a human foot, which was a convenient, if wildly variable, measuring instrument. The foot may also have included the shoe, which would explain why the foot is actually longer than a foot. The point is that today, it’s only a name, even if it has an origin in something physical.

When the latest mobile device comes out with all sorts of screen densities, what you really want to know is: how many (CSS) pixels do we have?

For example the iPhone 4S advertised a resolution of 640 x 960 pixels, but for CSS purposes, its size is really 320 x 480 px, just like its predecessor. Note the subtle distinction in units: people still argue over what we mean by a pixel, but the CSS px unit (pixel) retains is original meaning.

But you knew that: printed web pages have always maintained a resolution of 96 px per inch, regardless of the resolution of the printer. The same now applies to the screen: regardless of the screen density, the resolution is still 96 px per inch.

Note that this means that a CSS pixel (px) can comprise several screen pixels, and that different screen resolutions will result in different “inches”. But this was always going to be the case as we zoom in or out on a document.

What about images?

Images are made up of dots — pixels. Ignoring CSS for a moment, an image will by default display at a resolution of 96 pixels per inch. Just like CSS.

You can distort an image by fiddling with its width and height attributes. These were meant to allow the browser to leave room for the image while waiting for the image to load, but they have also been used to distort an image to fit an allotted size.

 

They have also been used to squeeze in a high resolution image for some of the newer screens.

However, if you are preparing an image for the Web, and you have in mind a particular physical size for the image, just remember that the result should be at a resolution of 9

Alternative Resolutions