Painting the Web

Images: Annotated, Embedded, and Optimized

You've added images to pages and you know how to use the img element. What more can you possibly learn?

Probably not a lot, but it doesn't hurt to have a little review just to make sure we're all on the same footing. Feel free to skip this section, though, if you're eager to get into issues of copyright and patent law. However, if you can hold off your anticipation for a little while, you might want to give this section a gander. Something about old dogs, new tricks.

Images. In Pages.

To add an image to a page, you'll use the img element, setting the src attribute to the URL for the image:

<img src="http://some.com/image.jpg" />

If you want your page to validate without errors or warnings, remember to "close" the element by adding the end slash, and make sure the element has an alt attribute:

<img src="http://some.com/image.jpg" alt="Photo of the boss at company picnic" />

The alt attribute supports accessibility. Screen readers, software that vocalizes what's happening on a computer screen, speak the text in this field. Providing meaningful text ensures that those dependent on such readers aren't locked out of the web page experience. Avoid repeating the name of the image file; use something meaningful, such as "Partially opened chocolate daylily." The text should be fewer than 100 characters and in whatever is the dominant language for the site. For decorative images that have no real meaning other than a visual context, use an empty string; ...