Chapter 5
Imagery of some sort is an important part of most websites, making them more visually stimulating and
memorable. The graphical elements of a design can form the basis of your site’s branding and visual
identity and can set your site apart from the millions of others on the World Wide Web.
Images can decorate, but they can also communicate; pictures are content too, and some ideas are much
better communicated visually. Photos, illustrations, logos, icons, maps, charts, and graphs can get your
ideas across in ways that text alone might not accomplish.
How Digital Images Work
Like anything else that lives in a computer’s electronic memory, a digital image is nothing more than data
in the form of ones and zeros (binary code), collected into a virtual file. A computer reads that array of
digits (each binary digit is a bit) and translates each set of bits into a signal that can be sent to a display
device that turns that signal into tiny dots of colored light that human beings can see—bright red, dark
blue, pale gray, and so on. The file also includes encoded instructions about how these dots of light (called
pixels, short for “picture elements”) should be arranged, like a mosaic of tiles, to make up a discernable
image. You can see the individual pixels if you look closely at a computer or television screen, or you can
check out the extreme close-up in Figure 5-1.
Figure 5-1. Zooming in on a digital image reveals the tiny square pixels that comprise it
Because these images are assembled from a “map of bits,” they’re called bitmapped images, and most
images on the Web are bitmaps. Storing the color and location of every single pixel adds up to a lot of
data, especially when there are hundreds of thousands of pixels in the typical snapshot and millions of
possible colors (up to 16,777,216 unique colors in a 24-bit image, to be exact).
Images for the Web are usually compressed to decrease the file size so that downloading a web page is
tolerable, even on slower Internet connections—and if you’ve ever downloaded a large file over a slow
connection you know how frustrating it can be. By either reducing the number of colors stored or reducing
the number of pixels memorized, you can greatly reduce the overall file size as well. The goal of
compressing an image is to achieve the smallest possible file without sacrificing too much of the original
picture quality.