Naming Things
When talking about responsive or universal images, size is the most important property. Unfortunately the most common unit web developers use for the size of an image, pixel, is ambiguous. It has two meanings:
- A physical pixel on a screen or a single image point in a bitmap.
- A unit of measure.
Usually the context of where the word “pixel” is used defines which one it is.
But how do you correctly measure the width of an image for a responsive website? There are two factors involved: The physical size of the image and the distance from the device to the viewer. Obviously an image appears larger if it is closer to the viewer. Therefore, the unit of measure for universal images should not be based on an absolute width like Millimeter but on a viewing angle.
Luckily that’s what the “Pixel” unit is based on in the CSS 2.1 specification. So a CSS pixel is resolution independent. It is 0.213° or 12.8′. The definition is: “The visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length.” Since “an arm’s length” is not an exact value, the unit is not scientifically exact, but good enough for what it is used for.
This is the reason why the viewport width of an iPhone 4 in portrait mode is still 320 pixels even though the display has twice the number of physical pixels.
In Android the unit is called “Density independent pixel” or dp, which is maybe a better way to explicitly separate the unit from the pixel unit used by all image editing programs which is based on the actual pixels in an image.
It is therefore necessary to always think about which version of the pixel unit is used in the current context. If it is not clear, it is better to explicitly specify it.
