Images

The img tag

Use the <img> tag to show images on a Web page. Like this:

<h1>Happiness</h1>
<p>What makes a dog happy?</p>
<p><img src="food_love_happiness.png" alt="Food, love, and happiness"></p>

src gives the URL of the image file. Like URLs for links, the URL can be absolute, root relative, or relative.

The alt attribute

You should add the alt attribute to every image. It gives a text alternative to the tag when the image can't be shown.

There are two reasons you should use the alt tag. First, the alt attribute is used by screen readers, that read out the text of a Web page to visually impaired people.

Second, the alt tag helps search engines know what the image is about. People are more likely to find your page if you add alt attributes to your images.

Links on images

You can add links to images as well, like this:

<a href="/index.html"><img src="/library/home.png" alt="Home"></a>

The browser will jump when the user clicks on the image.

Reusing images

Sometimes we want to use the same image on many pages. A logo, for example, might be on every page. How?

Earlier, we talked about root relative links. That's a link from the root of a site, to a file somewhere in the site. We can use root relative links to help us reuse images.

Suppose a site's files were organized like this:

We want to reuse the images oscar.png, renata.png, and rosie.png. We put the files into a directory we create especially for shared files. I called this one library, but you could use a different name.

Every time we want to show a picture of Rosie, we put this in the HTML:

<img src="/library/rosie.png" alt="Rosie">

Here's Rosie:

Adela

So, this would save server disk space, right? We'd only have one copy of rosie.png, rather than a bunch of copies all over the place.

There's another reason to reuse files, though. It makes the site easier to manage. Suppose we want to change Rosie's photo, to another one that's even cuter. We replace /library/rosie.png with a new file, and every page on the site uses the new photo.

CoolThing

There are many good, free image tools out there. Here are some I use.

Exercise

Summary