HTML and CSS Reference
In-Depth Information
Plan
Ahead
(
continued
)
Establish where to position and how to format the graphical image.
The content, size,
shape, position, and format of a graphic should capture the interest of viewers, enticing
them to stop and read the Web page. Often, the graphic is the center of attraction and
visually the largest element on a page. If you use colors in the graphical image, be sure they
are part of the Web page's color scheme.
Identify the width and height of the image.
The width and height (measured in pixels)
of an image should always be identified in the <img> tag. These dimensions are used by the
browser to determine the size to display the image.
Provide alternate text for the image.
Text describing the image, known as alternate
text, should always be used for each image. This text is especially useful to users with visual
impairments who use a screen reader, which translates information on a computer screen
into audio output. The length of the alternate text should be reasonable.
Types of Web Page Images
Images are used in many ways to enhance the look of a Web page and make it more
interesting and colorful. Images can be used to add background color, to help organize a
Web page, to help clarify a point being made in the text, or to serve as links to other Web
pages. Images are often also used to break up Web page sections (such as with a horizontal
rule) or as directional elements that allow a visitor to navigate a Web site.
Web pages use three types of files as images: GIF, JPEG, and PNG (Table 2-9).
Graphics Interchange Format
(
GIF
)
files have an extension of .gif. A graphic image
saved as a GIF (pronounced
jiff
or
giff
) uses compression techniques, called LZW com-
pression, to make it smaller for download on the Web. Standard (or noninterlaced) GIF
images are displayed one line at a time when loading. Interlaced GIF images load all at
once, starting with a blurry look and becoming sharper as they load. Using interlaced
GIFs for large images is a good technique, because a Web page visitor can see a blurred
outline of the image as it loads.
A second type of image file is
Portable Network Graphics
(
PNG
), which has
a .png extension. The PNG (pronounced
ping
) format is also a lossless compressed file
format that supports multiple colors and resolutions. The PNG format is a patent-free
alternative to the GIF format. Most newer browsers support PNG images.
Finally,
Joint Photographic Experts Group
(
JPEG
) files have an extension of
.jpg, .jpe, or .jpeg. A JPEG (pronounced
JAY-peg
) is a graphic image saved using a lossy
compression technique that discards some data during the compression process and is best
suited for images with smooth variations of tone and color. JPEG files are often used for
more complex images, such as photographs, because the JPEG file format supports more
colors and resolutions than the other file types.
Images
Images on Web pages
are viewed in a variety of
environments, including
on computers with slow
connctions to the Internet.
Optimizing your images is
important to increase the
speed of download for all
of your Web page visitors.
Search the Web for more
information on image
optimization.
Table 2-9 Image Types and Uses
Image Type
Use
Graphics Interchange Format (GIF)
• Use for images with few colors (<256)
• Allows for transparent backgrounds
Portable Network Graphics (PNG)
• Newest format for images
• Use for all types of images
• Allows for variation in transparency
Joint Photographic Experts Group (JPEG)
• Use for images with many colors (>256), such as photographs
