From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

There are three general rules of thumb for creating and using great and usable Web graphics.

1. Keep them small
   Small images download faster, and the faster your page downloads the more likely people will stay. A good maximum size for images is 10K.
   
   Some ways to keep images small:
   • use JPeG images for photographs and GIF images for flat color pictures
   • crop the pictures to only include the important parts
   • with GIF images, use the fewest number of colors
   • with JPeG images, compress them as small as possible
   
   
   
2. Resize them with your graphics program (not the browser)
   When you use the width and height attributes to resize your images, you slow down the time it takes the browser to render the page. The browser has to spend time determining how the display the image, and this is time that many people will simply leave your site.
   
   
3. Always include descriptive alt text
   If your page has a lot of images, the alt text will display first, allowing your readers to know what is coming. Also, the alt text supports people with text browsers and audio browsers. Finally, you can use them to give more information about the image, such as copyright or credits.

To include an image you use the IMG tag. For correct HTML there is only one required attribute, the SRC attribute. This tells the browser where to find the image. However, to make your pages usable, you should also include the HEIGHT, WIDTH, and ALT attributes.

A good image tag looks like:

<img src="graphic.gif" width="10" height="10" alt="alternate text">

Previous Articles