Step by Step HTML5

142 Chapter 9
Practice Files Before you can use the practice files provided for this chapter, you need
to install them from the book’s companion content page to their default locations. See
“Using the Practice Files” in the beginning of this book for more information.
Selecting a Graphics Format
There are dozens of graphics formats, but most Web browsers can display only a few. The
most commonly accepted formats are GIF, JPG, and PNG, so most Web designers stick to
those.
Graphics formats differ from each other in the following ways:
●●
●●
●●
●●
Color depth The higher the color depth (that is, the more bits used to uniquely
describe the color of each pixel), the more realistic a photo will look. Color depth
is not a major issue for drawings. Full color is 24-bit; if a graphic uses more bits per
pixel than that, the extra bits are typically used to further define the color (not really
necessary for Web use) and/or to set special image attributes, such as transparency.
Compression/file size Graphics files tend to be large, so there are compression
schemes that decrease their file size. Lossless compression makes a file smaller
without losing any image quality; lossy compression shrinks a file at the expense of
some quality. When the image is displayed on a computer monitor, however, the
difference is minimal.
Animation Some graphics formats support a very primitive kind of animation,
in which several versions of a graphic are stored in a single file, and the Web page
displaying the file cycles through the images. Simple animations displayed on a
Web page are usually animated graphics rather than video clips.
Transparency Some graphics formats can make the background of an image
transparent. When you place the image in a document, the background color of
the document shows through the transparent portions of the image. You can use
this to create interesting effects. For example, when you place an image with a
transparent background in a document containing text, the text wraps around the
image. Delving into that technique is beyond the scope of this book, but you might
want to experiment with transparency in Photoshop or some other graphics-editing
program on your own.
Tip To create your own animated graphics, use a graphics program that supports that feature,
such as Photoshop or Paint Shop Pro.