Adding Images to Web Pages

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" />

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" />

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" />

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." />

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="" />