Naming Things [via Universal Images Community Group]

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.



----------

This post sent on Universal Images Community Group



'Naming Things'

https://www.w3.org/community/universalimages/2015/12/29/naming-things/



Learn more about the Universal Images Community Group: 

https://www.w3.org/community/universalimages

Received on Tuesday, 29 December 2015 10:23:04 UTC