he image tag, offers several attributes that you should always include for best use of graphics:

In addition, the size of the image in the graphic file and the size you use it in your page should always match.

Finally, put your image files together, in some logical and easy-to-find location.

Use Height and Width Attributes
Be sure to include the height and width of your image in the image tag.

The height and width attributes give information to the browser about the size of your graphic. They are part of the image tag:

Height and width attributes are usually automatically inserted in the HTML code by WYSIWYG page editors. In programs like Homesite, you have option of inserting the size when you use the “insert image tag” feature. If you code strictly by hand, you can find the image height and width in your image editing program.

Using height and width attributes means:

• The browser doesn’t have to calculate the image size because you’ve told it the height and width values already. If the height and width attributes are not included, the browser has to load the entire image, then calculate its size before displaying it.
• The text can load before the images, giving the viewers something to do while they wait for time-consuming graphics to load. This can happen because the browser uses the height and width to set a place holder for the image.
• You can do some design tricks, such as using a one-pixel gif as a spacer. You save a graphic at a much smaller size than you will use it on a page, and then resize it using the height and width tags. You don’t want to do this for a graphic whose quality matters because this process creates a poor looking graphic — but there are situations were this approach can be used to your advantage. The following example shows a resized image:

  Original graphic, 16×16 pixels:	Resized to 160×160 pixels using height and width attributes in the image tag:
  Original graphic It is 1×1 pixels; look very closely to see it.	One-pixel gif Resized using height and width tags to create a “bar.”

Don’t use the height and width attributes to make a graphic appear smaller on the page than it’s actual size; this just creates a larger download time plus added computer processing time. Resize the graphic in your image editing software instead and use it in your page at its true size.

Use the Alternative Text Attribute
Be sure to include the alt text attribute in your image tag.

The ALT attribute of the image tag provides the browser with text information to be displayed whenever it is not possible to display the graphic.

This will show up if your image is broken, if your reader has turned off images in his or her browser, of if the reader is using a text-only browser. In addition, this is a simple way to ensure that visually impaired readers using a “text reader” device will have some sense of what the graphic is about.

Using the alt attribute adds value?and it doesn’t increase the load time for the page.

Alt text is part of the image tag:

Always use the alt attribute. Alt text is most helpful to the viewer when it is descriptive of the graphic, but it can be anything you wish the viewer to see if the graphic cannot be displayed.

Don’t Resize the Image
Use the image at its actual size.

Yes, you can use the width and height image tag attributes to shrink or enlarge an image on-the-fly, but all that does is add processing time for your readers.

Instead, use the image at the size you have saved it in your graphics program. And if you need to use it at a different size, resize it with your image editing tool.

Original size = 252 x 144 pixels IMG attributes width=”252″ height=”144″ File size = 10.1K	Original size = 252 x 144 pixels IMG attributes width=”121″ height=”69″ File size = 10.1K Image had to download, then the browser needed to resize it.	Original size = 121 x 69 pixels IMG attributes width=”121″ height=”69″ File size = 3.3K Smaller file, faster download and no resizing.

Storing Image Files
Just as you do with .html files, you need to have a logical file structure for saving and calling your image files, as well as a logical naming convention for the files.

The images themselves aren’t physically placed with the Web page that displays them. Instead, the page will call the images by their file name. The images can be called by either a full, exact path, or a relative path.

• If all of your site’s HTML files reside in one directory, and if you have just a handful of image files, store your HTML files and image files in the same directory:

  www
    home
      index.html
      logo.gif
      photo.jpg
  

  Referencing image files in the above directory setup is simple. For example, to reference logo.gif from index.html, you would enter: .

• For any other situation than the above, store all of your image files in a separate image directory:

  www
    home
      index.html
    page1>
      page1.html
      links1.html
    images
      logo.gif
      photo.jpg
      thing.png

  Referencing image files in the above directory setup is just a tad more subtle. To reference logo.gif from page1.html, you would enter: .

  The .. moves you up one level, from page1 to www. Then, the /images/ moves down from www to the images directory.

• Use the 8.3 naming convention. That is, limit the first part of your filename to a maximum of 8 characters and append to this a 3-character extension that describes the file type?gif for a GIF, jpg for a JPEG, and png for a PNG. For example: logo.gif, trees.jpg, alleight.png.
  
  Why? Because some of your users might be on platforms that do not support long filenames (Windows 3.x, for example).
  
  
• Use all lowercase letters.
  
  Why? Because some servers (UNIX, for example) are filename case-sensitive and it’s all too easy to make an upper/lower-case mistake when entering a filename in your HTML docs.
  
  
• Do not use spaces or punctuation marks, except for underscores _ and dashes – .
  
  Why? Because some servers might have trouble decoding these special characters.