Images
So far, you’ve explored various kinds of elements that deal solely with text. However, web pages can
be a lot more interesting than that. Let’s find out how you can add images to your pages next.
When placing images in a document, you use the <img> element. Image elements are empty elements
because they will be replaced with the image you’re referencing. However, to work properly, you need
to tell the web browser where to find the image you’d like to insert, as well as give it a brief textual
description of what the image is.
These two pieces of metadata are specified inside the two required attributes that <img> elements
hold. First, the src attribute points to the actual image file to be loaded in place of the <img> element.
The same rules apply to the src attribute here as the href attribute on the <a> element. Relative or
absolute, the src attribute gives the browser the URL of where to look for the image.
The second attribute is alt, short for the alternate text for the image. (You might also hear people
calling this the image’s alternative text or alt text.) It’s used to describe what the image is and what
meaning it has in the document. Here’s an example (as displayed in Figure 4-7):
<img src="/images/moose.jpg" alt="The Majestic Moose" />
Figure 4-7. Although the content of yourimages may vary, we can probably allagree that being able to add images topages is an important feature.
Recall that since this is an empty element, it contains no other content and thus is opened and closed
with a single tag. The attributes here indicate that you want to load in the moose.jpg file found in the
images folder relative to the website’s root and that you want to provide the alternate text of “The
Majestic Moose.”
The src attribute’s purpose is obvious, but the alt attribute’s purpose isn’t. Usually, the alternate text
doesn’t even show up on the page when you look at it in your web browser. So, what’s it there for?
The alternate text actually provides several very important features. First, in keeping with the semantic
importance of markup, it’s what lets the image provide some meaning to the document. In the previous
example, if this were a page about wildlife, then the picture of the moose would likely be
considered part of the content of the page. Without the alternate text in the <img> element, the
image would be essentially “meaningless,” and the document would lose some of its semantic value.
On the other hand, if the rest of the page was about grocery shopping and the picture of the moose
was just there for visual ambiance, then the image is probably superfluous and might be considered
“not content.” In this case, you would leave the alternate text completely blank to indicate that the
image is used only for visual reasons and shouldn’t be considered an important part of the content of
the page:
<img src="/images/moose.jpg" alt="" />
Note that you still need to include the alt attribute in the <img> element code but that the value of
the alt attribute is missing (or null). Determining what images on your page should be “real content”
and which ones shouldn’t is part of the art of web development. There often isn’t a clear or right
answer, so you simply need to use your best judgment.
Assuming the picture does add some value to the page, then the alternate text also helps out in a few
additional concrete ways. First, even though it does not show up on the page in the normal sense,
many web browsers will show the alternate text for an image if you hover your cursor over the image
for a few seconds or if you give the image keyboard focus. You can think of it like a transient caption;
it’s there if the visitor to your web page requests to see it, but it’s otherwise hidden.
Of course, some visitors to your website won’t be able to see at all. These visitors might be humans
with visual impairments or they might be machines, such as Google’s search engine spider (googlebot).
For these visitors, the presence (or absence) of the alternate text is more important than the image
itself.
Visually impaired people browsing the Web often do so with a special kind of web browser that reads
the content of web pages aloud to them. These programs are called screen readers. When a screen
reader happens upon an image in your document, it uses the alternate text to describe what the
image shows. Providing good alternate text for your images is crucial to making your web pages accessible
and understandable to these visitors.
Similarly, when Google or Yahoo is reading the markup of your page, good alternate text in your <img>
elements can help them make sense of what the purpose and content of the image is, allowing them
to be more effective in ranking your web pages appropriately in their search result listings. Generally,
the better your alternate text describes the content in your images, the higher your search result rankings
will be.
Finally, if for any reason the image you’ve told the web browser to include in the page can’t be found
(the image file itself) or loaded, most web browsers will replace the <img> element with the text of the
alt attribute. This provides a sort of contingency plan to help ensure that visitors to your website get
what they came for, even if they can’t get it in the preferred form. Similar techniques are used all the
time in web development, and they’re collectively called graceful degradation.
When using images on your sites, be mindful of how many you have put on each page, how big they
are, and what purpose they serve. Excessive use of images will make a page slow to load, and it might also be visually disruptive. Compared to XHTML, images are extremely large. On most pages, the bulk
of time it takes to download that page is caused by its images.
0 comments:
Post a Comment