Foundation HTML5 with CSS3

Embedding Media

VECTOR GRAPHICS

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

quality.

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 book, 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

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.