Image Size and Page Load Times

On a web page, without a doubt,  "content is king", fancy graphics do not substitute for lack of substance.  On the other hand, use of graphic images on a web page can add  interest, attract attention to selected areas of the page, or illustrate points presented.   But the use of images should not increase the page download time to such an extent that the viewer does not have the patience to wait for your entire page to load.  Large image files do take a long time for the browser to download. 

The following suggestions, offer techniques which enable you to include images on your pages,  while still having  reasonable download times.

Image Creation:

When creating web page images, save the file in the optimum format, gif, jpg or png.  If in doubt, try saving your image in all three formats, then use the format with the smallest file size and   acceptable  image quality.  (i.e. jpg with low resolution may be the smallest size, but the picture quality may be unsatisfactory for your application.)
  

Take advantage of graphic software features for optimizing image size (i.e. smaller sized) , by reducing colors used within your image.
   

Crop unnecessary background areas out of   your images to make them smaller.  Don't waste bandwidth on  meaningless backgrounds.
   

Consider resizing your image to make it smaller.

 

Web Design Issues:

Images used for background, bullets, bars etc. can be reused without suffering a download time penalty, once the first version of the image has been downloaded.  Repeatedly using the same image adds interest without increasing download time (after the first version of the image has loaded).
 

When the image you wish to include on your page is very large (such as some of my screen capture examples), consider using a thumbnail sized image which hyperlinks to the full sized image.  The viewer is forewarned that they are loading a large image, and the thumbnail gives them an idea if they even want to wait for the full sized image to load.

Consider using larger width and height dimensions to give the impression of a larger image with the use of a small sized image file.  (This is not always possible, but something to consider.)
  

  Consider using images that are wide and narrow for backgrounds.  Overall file size small, but impact can be very large.
 

Always use height and width tags when embedding images on a page.  The browser can load text onto the page while images are being transmitted.   Browser doesn't have to calculate image size.

 

Last updated on 02/13/2003  by L.M. Hicks