html tutorials web design help css tutorials free web graphics diy search engine optimization

Adding Images to Web Pages

Adding an image to a web page is fairly easy, but there are plenty of things that can go wrong too. Where people usually run into trouble is not paying enough attention to details. The path to the image, the image name, and the image extension are all case sensitive.

Case sensitivity means you must capitalize the letters in your image code that are capitalized in the saved image file, and enter the letters in lower case in your code that are in lower case in the saved file. The path to the image is simply where the image is located on the server (or your computer) in relation to the page where it is to be displayed. You can learn more about "paths" from my Server Paths tutorial.

Adding images to web pages is where the fun begins for many folks. Up to the point where there are some graphics and color involved, a web page looks very much like another boring text file in a word processing program.

A basic image tag is written like this:

<img src="mom.jpg" />
With that line of code, img is short for image, and src is short for source, so what youíre saying with that code is that the browser should open an image and the image is named mom and it's in the jpg format.

Um . . . I'm guessing it's a picture of your mom.

You're also telling the browser the image is in the same directory as the web page. If the image is in another directory (folder), one named images for example, then we'd have to include the images folder in the path to the image in our code. In that case, the code would look like this:

<img src="images/mom.jpg" />
Please see the Server Paths tutorial for more on that.

Because an image tag has no closing tag in HTML, to make it XHTML compliant the tag is closed with a space and forward slash as shown in the previous code example. If you aren't concerned with XHTML compliance, eliminate the space/slash at the end of the code example. It works the same either way.

That will get the job done, but there are other attributes and values that every image except a background image should have. By adding the width and height attributes the browser knows how much space to reserve for the image before the image data downloads. This makes the page display slightly faster because the viewing computer doesn't have to keep reconfiguring the layout as image data downloads. It also makes it easier for your visitors to start reading your content without losing their place when a page is rearranged because image widths and heights were left out.

Letís add the width and height to that portrait of good olí mom now.

<img src="mom.jpg" width="480" height="360" />
Most portraits of a person are a little taller than wide, but because your mom has such a big nose this one is wider than it is tall.

OK, all kidding aside, you should also add "alt" text, short for alternative text, to your images. Alt text provides a brief description of the image for people using browsers that donít have native graphics capability or have images turned off in their browser preferences for faster surfing. Instead of showing an image, non-graphical browsers show the alt text. The alt text is also read aloud by screen readers so visually impaired people can understand what an image is about.

Alt text is added like this:

<img src="mom.jpg" width="480" height="360" 
alt="My dear mother and her big nose." />
Keep the description short. In most browsers, the text in the alt attribute pops up in a little balloon for a few seconds when the cursor is resting on it. If you make the alt text too long people won't have time to read it. If you rest your cursor on the big grin graphic at the end of this article, in most browsers you'll see the "alt" text I used with it.

Alt text can be added to any image except a background, and should be added to any image thatís part of your content; but you may want to make an exception for images that are part of your design. If you decide you donít want alt text on such images, you should still include the alt tag so the page will validate, just donít put text inside the quotation marks. Example:

<img src="corner.gif" width="30" height="30" alt="" />
That's the scoop on images, which was almost as good as a scoop of ice cream. Even your big-nosed mom would agree with that. Smile friend, it looks good and feels good too!
Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)