Optimize Images for Quick Loading by stariya


									Optimize Images for Quick Loading
  by Larisa Thomason
  Senior Web Analyst
  NetMechanic Inc.

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.

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

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

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

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:

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!

if (document.images)
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:

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.

About the Author:
Larisa Thomason is Senior Web Analyst, Specializing in Accessibility
at NetMechanic Inc., 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.

To top