HTML and CSS Reference
In addition to bitmaps, there are also digital images whose data is stored as a set of mathematical
instructions that a computer can follow to draw shapes on the screen or on paper. These are called vector
graphics , and they can be rendered at any size without changing the original image's appearance or
The W3C (and others) have developed a vector graphic format specifically for the Web. Based on XML, the
Scalable Vector Graphics (SVG) format still isn't fully supported by some major web browsers, so its
practical applications are limited for the time being. Although you can use SVG images in some current
browsers, other browsers (including any older versions) won't be able to display them properly. So for the
purposes of this topic, we'll only be focusing on the old reliable bitmaps. You can learn more about SVG at
the W3C website ( w3.org/Graphics/SVG ).
Web-Friendly Image Formats
You can compress digital images for the Web using three common formats: JPEG, GIF, and PNG. Each
uses a different means of compression, and each has its own particular benefits and drawbacks. Most web
browsers (those that can display images, that is) have built-in software that will interpret and render files in
these formats. Web browsers may not be able to render other types of images, so you should stick to
JPEG, GIF, and PNG, and almost any program you might use for creating or editing digital images will be
able to export files in all three formats.
JPEG (pronounced “jay-peg”) stands for Joint Photographic Experts Group, the organization that invented
the format. The compression scheme reduces the size of the file by sampling the average color values of
the pixels and then removing excess redundant pixels from the image. When the image is later
decompressed and rendered, those deleted pixels are re-created based on the stored samples.
Because JPEG compression loses some information, the compression is considered lossy , and
decompressed JPEGs will never be quite the same quality as the originals. JPEG is actually a variable-
loss format and can be compressed at different levels—more compression means more pixels are
discarded to create a smaller file, but the price is paid in quality. Highly compressed JPEGs will tend to
appear blurry or with blocky smudges, called artifacts , where the pixels have been interpolated. In Figure
5-2 you see three pictures of Jolene, each the same JPEG image saved at a different level of compression
(shown here at twice the original size for clarity). The file gets smaller as the image is more compressed,
but the quality also declines.