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

Aliasing
Resizing digital images can result in distortions and quality loss. A high-resolution image displayed at a lower
resolution, for example, might cause distortion artifacts called aliasing. Anti-aliasing allows the edges of objects
to be rendered smoothly. On the Web, anti-aliasing is often applied to fonts and curved web graphics such as
rounded corners.
Anti-aliasing requires additional colors with gradually decreasing intensity that merge with the background
(Figure 9-6 ).

Figure 9-6. Aliased vs. anti-aliased fonts and circles. The original images are shown above, the magnification below.
Note the pixelated edges on the left images

Using anti-aliased fonts on the Web has pros and cons. The most important advantages are smoother fonts, many
of which are easier to read because of reduced blurring, the similarity with printed types (depending on the font being
used), and often a more aesthetic appearance. However, small fonts become too fuzzy to read, and sharp edges are
not always precise.

■ the readability of different web fonts is very different, and even the same typeface might look gorgeous
in medium size but becomes unreadable when used with a small font size. there is often a transition between the two
states: some parts of the font curves disappear, while others remain visible. moreover, the rendering of the same web
fonts is different in various browsers.

Caution

Color Depth
The number of bits required for representing the color of a single pixel in a bitmap image or video frame buffer
typically varies from 1 to 2 32 and is known as color depth . The higher the color depth, the larger the file size, which is
an important factor in image optimization.
Monochrome (binary) images such as line art with black lines and no tonal contrast should be stored with 1 bit
color depth, in other words, two possible values for each pixel.
Black-and-white photographs, which are composed exclusively of 256 shades of gray, should be represented as
8-bit grayscale images (2 8 = 256).
24-bit color depth ( true color ) applies red, green, and blue colors with various intensity values between 0 and
255 per channel (RGB color model) to reproduce 2 8 ·2 8 ·2 8 =2 24 =16,777,216 different colors with additive color mixing .
Since the human eye cannot distinguish any two adjacent intensity values of these channels, this color depth is
suitable for storing photographs.