Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 329

Pixel Density
Not just text content but also graphics can and should be optimized for web publishing. The measure of spatial dot
density is dots per inch (dpi), which means the number of individual dots represented in a line within the span of
1 inch (2.54 cm). Although dot density correlates with image resolution, it is related indirectly. Instead of the dots that
are used for printing, computer screens apply pixels to build up images. Their density can be expressed in pixels per
inch (ppi). Although confusing, pixel densities standardized for computer screens are often expressed incorrectly
in dpi rather than ppi (72, 96, and 120 dpi). The lowest value, 72 ppi, derives from typography where 1 point (pt) is
defined to be 1/72 inch (» 0.0139 inch or 352.8 mm). An image displayed on a 72 ppi screen has the same physical
dimensions as the printed version in 72 dpi; in other words, 1 pt on paper is equal to 1 px on the screen. However, this
is just a theoretical approach; it is not accurate and has lost its significance. Since the pixel density affects not only the
quality of image rendering but also text readability, higher values provide better user experience. Modern operating
systems and computer screens usually support 96-120 ppi. The pixel density of a screen can be calculated by the ratio
of the diagonal resolution in pixels (using the Pythagorean Theorem) and the diagonal size in inches:

2 2

d
d

wh
d

+

p p

p

PPI ==

i i

where

d p is diagonal resolution in pixels,
w p is width resolution in pixels,
h p is height resolution in pixels, and
d i is diagonal size in inches.
For example, the 10.1" display of the Lenovo ThinkPad 10 business tablet with WUXGA (1920×1200) resolution
features 224 ppi, the 12" display of the Microsoft Surface Pro 3 with 2160×1440 resolution 216 ppi, while a 23" full HD
(1920×1080) monitor 96 ppi.
Smartphones are very competitive from this aspect. In 2010, the Apple iPhone 4 featured the largest resolution
screen, called the Retina display (640×960), which gave a high 326 ppi 7 pixel density for the 3.5" screen. From 2013
onward, high-end smartphones such as the HTC One and the Samsung Galaxy S5 introduced a full HD display with a
resolution of 1920×1080 on a typical screen size of 4.7-5.1", achieving an even higher pixel density (432-468 ppi).
While the optimal pixel density for web publishing is not standardized, computer screens and operating systems
generally support 120 ppi as a maximum and typically use 96 ppi. Larger pixel densities needlessly increase the file size.

Resolution
On the screen, resolution determines image size, not quality in general (printing is the opposite). As a general rule, the
smallest image size that provides the desired details should be applied. The usual 8-16 MP photos taken by modern
digital cameras are usually too large for web publishing and should be resized to a smaller resolution. Because
huge-resolution photographs are large in size (a few megabytes depending on compression ratio and file format), it
would take too long to download them. Moreover, they have too much detail that might cause legal issues considering
faces, number plates, and so on, in the background. The high-resolution depiction of a human face can be used for
fraudulent purposes because it can be easily retouched and printed (especially in passport size).
Providing width and height attributes on img elements for faster and robust rendering of web page images is
highly recommended. However, these attributes should not be used for resizing photos. Online galleries and albums
should apply small thumbnails linking to the full-size image files.

7 At a distance of 12 inches from one's eye, this is the maximum amount of detail the human retina can process (hence the name).