by Larisa Thomason,
Senior Web Analyst,
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.
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:
- 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).
- 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
Insert the following code into your HEAD tag. Be sure to use the correct name and path for your image!
img1 = new Image();
img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
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.