ADDING IMAGES

A web page with all text and no pictures isn’t much fun. The Web’s explosion into mass popularity is due in part to the fact that there
are images on the page. Before the Web, the Internet was a text-only tundra.

Images appear on web pages in two ways: as part of the inline content or as tiling background images. Background images are added
using Cascading Style Sheets and are talked about at length in later chapters. In this section, we’ll focus on adding image content to
the document using the inline img element.

Inline images may be used on web pages in several ways:

As a simple image. An image can be used on a web page much as it is used in print, as a static image that adds information, such as a
company logo or an illustration.

As a link. As we saw in the previous section, an image can be used as a link to another document by placing it in the anchor element.

As an imagemap. An imagemap is a single image that contains multiple links (“hotspots”) that link to other documents. This will be
left to you as a reading assignment.

First, a Word on Image Formats

We’ll get to the img element and markup examples in a moment, but first it’s important to know that you can’t put just any image on a
web page. In order to be displayed inline, images must be in the GIF, JPEG, or PNG file format. In addition to being in an appropriate
format, image files need to be named with the proper suffixes—.gif, .jpg (or .jpeg), and .png, respectively—in order to be recognized
by the browser. Browsers use the suffix to determine how to display the image.

If you have a source image that is in another popular format such as TIFF, BMP, or EPS, you’ll need to convert it to a web format
before you can add it to the page. If, for some reason, you must keep your graphic file in its original format, you can make it available
as an external image, by making a link directly to the image file, like this:
<a href="architecture.eps">Get the drawing</a>

Browsers use helper applications to display media they can’t handle alone. The browser matches the suffix of the file in the link to the
appropriate helper application. The external image may open in a separate application window or within the browser window if the
helper application is a plug-in, such as the QuickTime plug-in. The browser may also ask the user to save the file or open an
application manually.
Without further ado, let’s take a look at the img element and its required and recommended attributes.

The img Element

<img /> (XHTML)

<img> (HTML)
Adds an inline image

The img element tells the browser, “Place an image here.” You add it in the flow of text at the point where you want the image to
appear, as in this example. Because it is an inline element, it does not cause any line breaks, as shown in Figure 1.
<p>I had been wanting to go to Tuscany <img src="tuscany.jpg" alt="" /> for a long time, and I was not disappointed.</p>

Figure 1

1|Page
When the browser sees the img element, it makes a request to the server and retrieves the image file before displaying it on the page.
Even though it makes a separate request for each image file, the speed of networks and computers usually makes it appear to happen
instantaneously (unless you are dialing in on a slow modem connection).

The src and alt attributes shown in the sample are required. The src attribute tells the browser the location of the image file. The alt
attribute provides alternative text that displays if the image is not available. We’ll talk about src and alt a little more in upcoming
sections.

There are a few other things of note about the img element:

• It is an empty element, which means it doesn’t have any content. You just place it in the flow of text where the image should go.

• In XHTML, empty elements need to be terminated, so the img element is written <img />. In HTML, it’s simply <img>.

• It is an inline element, so it behaves like any other inline element in the text flow. Figure 2 demonstrates the inline nature of
image elements. When the browser window is resized, the line of images reflows to fill the new width.

• The img element is what’s known as a replaced element because it is replaced by an external file when the page is displayed. This
makes it different from text elements that have their content right there in the (X)HTML source (and thus are non-replaced).

• By default, the bottom edge of an image aligns with the baseline of text, as shown in Figures 1 and 2. Using Cascading Style
Sheets, you can float the image to the right or left margin and allow text to flow around it, control the space and borders around
the image, and change its vertical alignment.

Figure 2
Providing the location with src
src="URL"
Source (location) of the image

The value of the src attribute is the URL of the image file. In most cases, the images you use on your pages will reside on your server,
so you will use relative URLs to point to them. If you just read previous section, you should be pretty handy with writing relative
URLs by now. In short, if the image is in the same directory as the (X)HTML document, you can just refer to the image by name in
the src attribute:
<img src="icon.gif" alt="" />

Developers usually organize the images for a site into a directory called images or graphics. There may even be separate image
directories for each section of the site. If an image is not in the same directory as the document, you need to provide the relative
pathname to the image file.
<img src="/images/arrow.gif" alt="" />

Of course, you can place images from other web sites as well (just be sure that you have permission to do so). Just use an absolute
URL, like this:
<img src="http://www.example.com/images/smile.gif" alt="" />

Organize Your Images

It is common to store all the graphics in their own directory (usually called images or graphics). You can make one images directory to

2|Page
store all the graphics for the whole site or create an images directory in each subdirectory (subsection) of the site.

Once you have your directory structure in place, be careful to save your graphics in the proper directory every time. Also be sure that
the graphics are in the proper format and named with the .gif, .jpg, or .png suffix.

Deprecated img Attributes

In the past, image placement was handled with presentational attributes that have since been deprecated. For the sake of
thoroughness, I’m listing them here with the recommendation that you not use them.

border
Specifies the width of a border around an image. Use one of the CSS border properties instead.

align
Changes the vertical and horizontal alignment of the image. It is also used to float the image to the left or right margin and allow text to
wrap around it. This is now handled with the CSS float property.

hspace
Holds space to the left and right of an image floated with the align attribute. Space around images should be handled with the CSS
margin property.

vspace
Holds space above and below an image floated with the align attribute. Again, the margin property is now the way to add space on
any side of an image.

Providing alternate text with alt

alt="text"
Alternative text

Every img element must also contain an alt attribute that is used to provide a brief description of the image for those who are not able
to see it, such as users with screen readers, Braille, or even small mobile devices. Alternate text (also referred to as alt text) should
serve as a substitute for the image content— serving the same purpose and presenting the same information.
<p>If you're <img src="happyface.gif" alt="happy" /> and you know it clap your hands.</p>

A screen reader might indicate the image and its alt value this way: “If you’re image happy and you know it clap your hands.” If an
image is purely decorative, or does not add anything meaningful to the text content of the page, it is recommended that you leave the
value of the alt attribute empty, as shown in this example and other examples in this chapter. Note that there is no character space
between the quotation marks.
<img src="bullet.gif" alt="" />

Do not omit the alt attribute altogether, however, because it will cause the document to be invalid. For each inline image on your
page, consider what the alternative text would sound like when read aloud and whether that enhances or is just obtrusive to a screen-
reader user’s experience.
Alternative text may benefit users with graphical browsers as well. If a user has opted to turn images off in the browser preferences or
if the image simply fails to load, the browser may display the alternative text to give the user an idea of what is missing. The handling
of alternative text is inconsistent among modern browsers, however, as shown in Figure 3.

IE 6 and 7 (Windows)
With image displayed

Figure 3
Firefox 1.5 and 2; Netscape 7 (Windows and Mac) Safari (Mac)

Long descriptions
3|Page
Alternative text is a good start toward improving the accessibility of non-text content, but it is intended to be brief and succinct. For
complex images, such as floor-plans, charts, graphs, and informational photographs, alternative text is not enough to fully convey the
content. For those images, you may provide a longer description of the image using the longdesc attribute.
The value of the longdesc attribute is the URL of an external (X)HTML document containing the long description, as shown here:
<img src="executiveking.jpg" alt="photo of executive king room" longdesc="executiveking-ld.html" />

The content of the executiveking-ld.html document reads:

<p>The photo shows a room with a sliding-glass door looking out onto a green courtyard. On the right side of the room, starting in the far corner, is
a small desk with a light and a telephone, then a king-sized bed with 3 layers of pillows and a floral bed-spread, then a small night stand with a
lamp. Opposite the bed is an armoire with the doors open revealing a flat-screen television and a small refrigerator.</p> <a
href="rooms.html#execking">Back to rooms page</a>

Unfortunately, many browsers and assistive devices do not support the longdesc attribute. As a backup, some developers provide a
D-link (a capital letter “D” linked to the long description document) before or after the image. Others use a descriptive caption as the
link.

Providing width and height dimensions

width="number"
Image width in pixels

height="number"
Image height in pixels

The width and height attributes indicate the dimensions of the image in number of pixels. Sounds mundane, but these attributes can
speed up the time it takes to display the final page.
When the browser knows the dimensions of the images on the page, it can busy itself laying out the page while the image files
themselves are downloading. Without width and height values, the page is laid out immediately, and then reassembled each time an
image file arrives from the server. Telling the browser how much space to hold for each image can speed up the final page display by
seconds for some users.
NOTE
You can specify the width and height of an image element using style sheets as well, and it could be said that pixel dimensions are a
matter of presentation, therefore the job of style sheets exclusively. On the other hand, these attributes provide basic and useful
information about the image, and seeing as the W3C has not deprecated them for the img element, it is still recommended that you
provide width and height attributes for every image.

Match values with actual pixel size

Be sure that the pixel dimensions you provide are the actual dimensions of the image. If the pixel values differ from the actual
dimensions of your image, the browser resizes the image to match the specified values (Figure 4).

4|Page
 Figure 4
Although it may be tempting to resize images in this manner, you should avoid doing so. Even though the image may appear small on
the page, the large image with its corresponding large file size still needs to download. You shouldn’t force a big download on a user
when all you want is a small image on your page. It is much better to take the time to resize the image itself in an image editing
program, then place it as actual size on the page.
Not only that, resizing with attributes usually results in a blurry and deformed image. In fact, if your images ever look fuzzy when
viewed in a browser, the first thing to check is that the width and height values match the dimensions of the image exactly.

Exercise 1 | Adding and linking images

You’re back from Italy and it’s time to post some of your travel photos to share them with your friends and family. In this exercise, you’ll
add thumbnail images to a travelog and make them link to larger versions of the photos.
All the thumbnails and photos you need have been created for you. I’ve given you a head-start on the XHTML files as well. You know
where to find them.
This little site is made up of a main page (index.html) and separate XHTML documents containing each of the larger image views
(Figure 5). Although it is possible to link directly to the image file, it is better form to place the image on a page. First, we’ll add the
thumbnails, then we’ll add the full-size versions to their respective pages. Finally, we’ll make the thumbnails link to those pages. Let’s
get started.

5|Page
 Figure 5

1. Open the file index.html, and add the small thumbnail images to this page to accompany the text. I’ve done the first one for
you:
<h2>Pozzarello</h2>
<p><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" height="100"/></p>

I’ve put the image in its own p element so that it stays on its own line with the following paragraph starting below it. Because all
of the thumbnail images are located in the thumbnails directory, I provided the pathname in the URL. I also added a
description of the image and the width and height dimensions.
Now it’s your turn. Add the image countryside_100.jpg to the empty p element under the h2, “On the Road.” Be sure to include
the pathname, an alternative text description, and pixel dimensions (100 wide by 75 high).
In addition, add both sienna_100.jpg and duomo_100.jpg to the empty p element under the subhead, “Sienna.” Again, add alt
text and pixel dimensions (these are 75 wide by 100 high).
When you are done, save the file and open it in the browser to be sure that the images are visible and appear at the right size.
2. Next, add the images to the individual XHTML documents. I’ve done window.html for you:
<h1>The View Through My Window</h1>
<p><img src="photos/window.jpg" alt="view out the window of the rolling Tuscan hills" width="375" height="500" /></p>

Notice that the full-size images are in a directory called photos, so that needs to be reflected in the pathnames.
Add images to countryside.html, sienna.html, and duomo. html, following my example. Hint: all of the images are 500 pixels on
their widest side and 375 pixels on their shortest side, although the orientation varies.
Save each file and check your work by opening them in the browser window.
3. Back in index.html, link the thumbnails to their respective files. I’ve done the first one here.
<h2>Pozzarello</h2>
<p><a href="window.html"><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" height="100" />
</a> </p>

Notice that the URL is relative to the current document (index.html), not to the location of the image (the thumbnails directory).
Make the remaining thumbnail images links to each of the documents.
When you are done, save index.html and open it in a browser. You’ll see that linked images display with a blue outline (until
you click them, then it should be purple indicating you’ve visited that link).
If all the images are visible and you are able to link to each page and back to the home page again, then congratulations,
you’re done!

Like a little more practice?

6|Page
If you’d like more practice, you’ll find two additional images (sweets.jpg and lavender.jpg) with their thumbnail versions (sweets_100.jpg
and lavender_100.jpg) in their appropriate directories. This time, you’ll need to add your own descriptions to the home page and create
the XHTML documents for the full-size images from scratch.
For an added challenge, create a new directory called photopages in the tuscany directory. Move all of the .html documents except
index.html into that directory then update the URLs on those pages so that the images are visible again.

7|Page