Foundation HTML5 with CSS3

Chapter 5

Figure 5-2. The same JPEG image at three different levels of compression. The version on the far right is the smallest

file, but the image quality has suffered a lot.

Furthermore, every time you edit and save a JPEG image, you’re re-compressing an image that has

already been compressed, losing a bit more data in the process. Every generation of JPEG compression

will degrade the image quality a little more, like making a photocopy of a photocopy. You should keep

original, uncompressed versions of your images to work from, compressing to a JPEG file only when

you’re ready to put your images on the Web.

The JPEG format saves disk space by sacrificing pixels but will store a lot of color information in a

relatively small file, making it ideal for photographs and other images with many different colors, or images

where one color blends smoothly into another (called continuous tone). JPEG files use the file extension

.jpeg or .jpg—the shorter version became customary because some older computer operating systems

don’t allow four-letter (or more) file extensions.

GIF

GIF stands for Graphic Interchange Format; it compresses images by reducing the overall number of

colors saved in the file, but it preserves the color and location of every pixel. Because GIF is considered a

lossless format, it’s a good choice for logos, icons, or graphics that feature text and need to maintain sharp

outlines for readability. A GIF image can contain a maximum of 256 different colors but may contain fewer

than that; storing fewer colors makes for a smaller file. Graphs, maps, line drawings, and any images with

large areas of solid color, or few colors overall, are ideal candidates for GIF.

GIF images may also have some areas that are transparent, allowing whatever is behind the image to

show through. Any given pixel is either completely transparent or completely opaque, so there will be a

jagged edge where the transparent and opaque areas border each other. Most graphic editing programs

enable you to specify a matte color for transparent GIFs, which can be the same as your page’s

background color to minimize “the jaggies.” Figure 5-3 shows a transparent GIF against a checkerboard

background. You can see the gray matte surrounding the image, which would blend seamlessly with a

solid gray background color.