HTML and CSS Reference
In-Depth Information
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.
