Using Images

The image tag <img> , inserts images into your web page. However, by itself, it does nothing. It requires the attribute/value. src="filename".
It will look like this:

As you can see, the image tag is a self-closing tag. There is not a separate closing tag.

There are three types of image formats that browsers will read, .gif - generally used for graphics and small animations, and .jpg - generally used for photographs. The third format, .png is gaining browser implementation. It is used for transparent or outlined image files - see the How To page for more information on .gif, .jpg and .png files.

Image files must be formatted, saved and named correctly for them to display properly in a browser. Make sure the name you put in your HTML matches the name of the file EXACTLY, CAPs and lower case, or it won't work!

QUICK TIP: Short names with NO spaces work best. See the lecture for detailed information on these topics. Remember: We are not in English class here. Slam the words together to make the web work better.

BAD file naming: "A picture of my kitty.jpg"

GOOD file naming: "kitty.jpg"

More Image Attributes

The alt provides a short description of the image. This description appears on screen while the image is loading and is also read aloud by voice-enabled browsers used by the sight impaired. It is now legally required to meet the web accessibility guidelines. It also gives people who have turned off the 'Display Graphics' option on their browser an idea of what they are missing. Is there anyone who still does that?

To specify the exact size of an image in your page use these two attributes:

width="n" height="n"
where n=pixels

These attributes tell the browser how much page space to allow for an image so both the image and the text will load faster. These attributes can also be used to re-size an image, this is NOT recommended because it may distort the image or cause pixilization. It is slower to download, and may also cause printing problems.

The title attribute shows when the mouse hovers over the image. It is optional. Check it out by hovering over my dog's picture.