HTML, XHTML & CSS

12
Part II: Formatting Web Pages with (X)HTML
This means you can use alternative text to describe the image to those who
can’t see it and/or title text to provide useful (or amusing) information about
the same image.
The W3C’s Web Accessibility Initiative (WAI) includes helpful tips for creating
useful and usable alternatives to visual content at www.w3.org/TR/
WCAG10-TECHS/#gl-provide-equivalents.
Specifying image size
You can use the height and width attributes with the element to
let the browser know just how tall and wide an image is (in pixels; px):
Brass
Most browsers download the HTML and text associated with a page before
they download the page graphics. Instead of making users wait for the whole
page to download, browsers typically display the text first and then fill in
graphics as they become available. If you tell the browser how big a graphic
is, the browser can reserve a spot for it in the page display. This speeds the
process of adding graphics to the Web page.
You can check the width and height of an image in pixels in any image editing
program, or in the image viewers built into Windows and the Mac OS. (You
might be able simply to view the properties of the image in either Windows
or the Mac OS to see its height and width.)
Another good use of the height and width attributes is to create colored
lines on a page by using just a small colored square. For example, this
markup adds a 10-x-10-px blue box to a Web page:
Use the element height and width attributes to set image height
and width. Thus we use these values to create a 10-x-10-px blue box in a
browser window (shown at the top of Figure 7-5) even though the original
image is 600 x 600 px. In general, it’s safe to reduce image dimensions using
these attributes although you’ll always want to check the results carefully
during testing. With any kind of aspect sensitive image, you want to maintain
its aspect ratio by dividing the original dimensions by some common value.