Technical data

Preparing Web Graphics 77
One of the main uses for PhotoPlus is to produce graphics for use on
the World Wide Web. This chapter looks at the prevalent Web graphics
file formats, techniques for creating and editing .GIF animations, and
two specialized techniques (image slicing and image maps) used to
extend the performance of Web images.
“Performance” may seem like an odd aspect of graphic design, but it’s
actually one of the key factors in designing for the Web. Among other
things, it means load time: how long it takes for your whole page,
including text and graphics, to display completely in a Web browser. In
practice, it’s hard to measure. Things like connection bandwidth, server
speed, and modem rating all play a part.
Load time is a function of the total size of all the page objects that need
to load; and graphics usually take up the lion’s share. Is there anything
you can do to reduce the total size of your graphics, aside from using
fewer graphics? An obvious suggestion is not to make them any larger
than they need to be to get your point across. Since file size increases as
the square of each dimension, shrinking both height and width by half
reduces the file size by 75%.
The PhotoPlus Export Optimizer will greatly help you in reducing file
sizes as far as possible while maintaining image quality. For related
background material, be sure to consult the “Color concepts” and
“Optimizing images” sections of Chapter 7.
Formats for the Web
Here are some general notes on the principal file formats used for Web
pictures and animation—.GIF, .JPG, and .PNG—and details on the
options you’ll encounter in the PhotoPlus Export Optimizer.
q The details will make a lot more sense if you have the Export
Optimizer open. Try using Double or Quad view (see Chapter 3)
for side-by-side quality comparisons at different settings.
.GIF format
The .GIF (Graphics Interchange Format) file format is universally
supported in Web browsers for both static and animated Web graphics.
It’s a lossless format (there’s no image degradation) with excellent
compression but a limitation of 256 colors. Use it for non-photographic
images with sharp edges and geometrics—for example buttons, bursts,
decorative elements, and text graphics. It’s suitable for grayscale photos
as well.