Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 240

Sizing and Compressing Graphics
Graphics are an integral part of Web pages. Before you add graphics to a site, make
sure that each graphic is saved at the proper size for insertion into the pages. Do not
resize a graphic after it has been added to a Web page unless you use an external editor
because the graphic is included in the page at its original size and then resized on the
user's computer. This can make the Web page load much more slowly. Also, compress
each graphic to the smallest possible file size you can achieve without losing image
quality. Be sure to retain the original uncompressed graphics in addition to the com-
pressed Web versions because you might need to return to the original version to create
another variation of the graphic in the future. A compressed graphic cannot be returned
to its original resolution. Also, be sure to use descriptive and meaningful names for the
graphic files. Logical naming structures save you time in later identifying the files.
Making Graphics Accessible
When you add graphics to a page, Dreamweaver prompts you to add an alternate text
description. The alternate text (or alt text ) is placed in the alt attribute in the image tag. It
is read by assistive devices, enabling vision-impaired users to understand the information
conveyed in the image. The alt text appears in place of an image in browsers that only
display text, in regular browsers when a download of an image is interrupted or slow,
and when a user mouses over an image in some browsers. Current accessibility guide-
lines state that you should provide text alternatives for any nontext content in Web pages.
Special instructions include:
• Controls or inputs. If nontext content is used as a control (such as a button), use the
alt text to explain its purpose. For example, alt text for the NextBest Fest logo graphic
could be “NextBest Fest logo and link to the home page.”
• Decoration and formatting. If nontext content is purely decorative, use it in a way
that enables assistive devices to ignore it. For example, the background images in the
container and content divs do not have alternate text and can be ignored by assistive
devices because they are used as background images.
• Conveys information. If nontext content conveys information, you should also provide
that information in an accessible way—a short alt text description, and if necessary, an
in-depth description. For example, designers often include a paragraph above or below
an image that conveys the image's information. When Dreamweaver prompts you to
provide the short alt text description, it also enables you to create a link to an in-depth
description that you can use to provide detailed information, if necessary.
• Images of text. To conform to the strictest level of accessibility guidelines, images of
text (or text that is actually a graphic such as a button that contains text) should be
used only for pure decoration.
After you insert a graphic, you can select it. A selected graphic is surrounded by a
black box with squares in the corners. The squares are resize handles . If you drag a
resize handle, it enlarges or shrinks the selected object.
Using the Insert Panel to Add Graphics
Gage has provided the redesigned NextBest logo as a GIF graphic. You will add the logo
at the top of every page in the site, starting with the home page.