o_19octlt3v29m1ul81r9513q81i4ra.pdf

Preparing Graphics for Web Use 143
Different graphics formats have different color depths and compression types, so you
might find that one format is appropriate in one situation but not in another. To convert
a graphic to a different format, open it in any graphics program that saves in multiple
formats, and then save it in a different format.
The following table lists the differences between the major Web-supported graphics
formats.
Name Color Depth Compression Animation Transparency
Graphics Interchange 8-bit (256 colors) Lossless Yes Yes
Format (GIF)
Joint Photographic 24-bit
Lossy No No
Experts Group (JPEG, JPG) (1.6 million colors)
Portable Network
Graphics (PNG)
24-bit or 48-bit Lossless Yes Yes
Preparing Graphics for Web Use
After you decide which graphics format to use for a particular image, your next decision
is how large the graphic should be—that is, how many pixels it should contain. This is
called the image’s resolution, and it is expressed in width and height, always in that order.
For example, an image that is 800 × 600 is 800 pixels wide and 600 pixels tall.
A graphic’s file size—how many bytes the file will take up on disk—has a direct relationship
to its resolution: the more pixels in a graphic, the larger the file. You must strike a
balance between making the resolution of a graphic high enough to display optimally
and low enough to download quickly when users load your page.
There are two ways of controlling the size (in pixels) of a graphic on a Web page:
●●
●●
One method is to use a graphics-editing program to resize it before using it on
the Web page. This method results in the smallest file size possible, which will
allow your page to load more quickly. It is also more work, though, and it prevents
anyone visiting your page from downloading a high-quality copy of your graphic.
(That could be a good or bad thing, depending on the purpose of your page.) The
exercise in “Inserting Graphics,” on page 144 uses a graphic that has already been
resized in this manner.
The other way is to use attributes within the HTML code to specify the height and
width at which the graphic is displayed. The Web browser will scale the graphic
down to the specified size when it displays the page. With this method, the file size