Is a picture worth a thousand words? On a Web page, it can be worth substantially more in download time.
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.
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.
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.
Larisa Thomason is Senior Web Analyst, Specializing in Accessibility at http://www.NetMechanic.com a leading developer of online maintenance, monitoring and promotion services that has “tuned up” over 32 million Web pages. She can be reached at larisa.thomason@netmechanic.com. Learn more about NetMechanic tools at www.netmechanic.com.
