Professional Web Design: Techniques and Templates, Fourth Edition

Learning about JPGs, PNGs, and GIFs 137
Unfortunately, if the image is already created, there is not much the designer
can do. When starting a design from scratch, however, this can be helpful to
know if the download size of the site is extremely critical. Figure 7.17 is a design
that was created especially to benefit from GIF compression. Notice that nearly
all the lines run horizontally. Not only does this take advantage of the GIF
format’s best compression, but it also takes advantage of using the ability to
repeat background images. In other words, each line that cannot be saved just as
a background color can be saved as a background image, which can be repeated
infinitely across the X axis (horizontal) using CSS. That way, the design requires
a download of only a few images. It is then up to the browser to repeat the
images, rather than making it necessary to download larger images.
Using JPGs
While the GIF format is useful for saving images with limited colors, the JPG
format is just as powerful when saving images with hundreds, thousands, or
millions of colors. Unlike multiple benefits from the 8-bit PNG and GIF formats,
this one advantage of the JPG format makes it remarkably valuable when building
mortised sites.
A designer should typically save an image as a JPG in the following situations.
Figure 7.17
Design that takes advantage of GIF horizontal compression.
Game Developing GWX