Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Load Time Tip:
Reuse, Optimize, and Preload Images

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
June 2000
Vol. 3, No. 6
 • HTML Tip
 • Usability Tip
 • Load Time Tip
  

Is a picture worth a thousand words? On a Web page, it can be worth substantially more in download time.

Carefully sized, relevant images make a Web site more appealing to visitors. Large, unwieldy graphic files often have the opposite effect. Few visitors are willing to stare at an empty screen for 10-20 seconds while your graphic image loads. They're far more likely to leave your site entirely.

Use these three easy techniques to include graphics on your site and still minimize download time.

  • Reuse images
  • Optimize images
  • Preload images

Reuse Images Throughout Your Site

Use the same image multiple times on your Web site. Company logos and navigational menu bars/icons are excellent candidates for reuse since they often appear on every page. If you reuse them, site visitors will only have to wait for a single download. After that, the images are cached on your computer and display immediately.

It's a small effort that produces huge benefits. You can:

  • Decrease your development time.
  • Decrease your visitors' download time.
  • Increase the usability of your site with consistent user interfaces & navigation tools.

Important: You must use the exact same name and path each time you use the image! Carefully organize your files and directories to avoid this simple mistake: two exact copies of the company logo are stored in different directories.

For example, consider the image tags shown below, both of which refer to an image called "logo.gif" that's stored in two different locations.

<IMG SRC="corporate/images/logo.gif">
<IMG SRC="office/images/logo.gif">

If you use corporate/images/logo.gif on the home page, but insert office/images/logo.gif on another page, the browser requests the same image twice and you haven't saved any time.

Optimize Images For Maximum Benefits

The two most commonly used image formats are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). GIFs are best for graphics that have few colors. JPEG is most useful for photographs and images that have complex color shadings.

If you're creating your own graphic images, you can control many factors that contribute to image file size. In effect, you can "pre-optimize" your images during design:

GIF images:

  • Limit the dimensions of the image (smaller is better!).
  • Crop out any unnecessary white space or background color.
  • Reduce the bit depth in the image (GIFs can use a maximum of 256 colors, but many images can be displayed well with far less).

JPEG images:

  • Blur the image slightly: JPEG compression likes images with few details, subtle color gradations, and few hard edges.
  • Use a graphics program that will let you preview different compression levels before you save the image.

Unless you're a professional graphic designer, you'll often use graphics created by others. In this case, you can load the image into a graphics program to modify it yourself. Be prepared to spend some time manipulating your images to get them just right. Always save a copy of the original first!

Image optimization tools often yield better results with much less effort on your part. They analyze your image and display it in different formats and compression levels. You can quickly choose the option that best combines quality with size.

Check out NetMechanic's GIFBot tool for a free demonstration: http://www.netmechanic.com/accelerate.htm

Preloading Images Is Easy With JavaScript

Experienced programmers use JavaScript to create complex Web applications, but JavaScript is also very friendly to beginners. Insert some simple JavaScript code inside your HEAD tag to load images in the background as the rest of your page loads. The browser will cache the images (store them on your computer) and then immediately display them wherever they're used on subsequent pages.

Browsers that don't recognize JavaScript code will simply ignore it. Images won't preload, but will still display on your pages exactly as before.

Insert the following code into your HEAD tag. Be sure to use the correct name and path for your image!

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
}
</SCRIPT>

Insert the preloaded image on subsequent pages by its name and path: "imageName1.gif".

Preloading images doesn't actually change your download time, but subsequent pages appear to load faster.

Design Pages To Minimize Download Time

When designing your site, remember that many Internet users still use modems that connect at painfully slow speeds - and probably will for a long time. Use carefully selected and optimized graphic images as one strategy to create attractive pages that are accessible to every visitor.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.