[website-critique] Optimize Images for Quick Loading

From: "DesignWorks" <tchapman@xxxxxxxxxxxxx>
To: <websitecritique@xxxxxxxxxxxxx>
Date: Sun, 20 Jan 2002 00:57:23 -0600
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 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.

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@xxxxxxxxxxxxxxxx
Learn more about NetMechanic tools at www.netmechanic.com.


Free Domain To List Members: http://szaroconsulting.com/freedomain.htm

~~~~~~~~~~~~~~~~~~~~~~
List Info: //www.freelists.org/cgi-bin/webpage?webpage_id=websitecritique 
~~~~~~~~~~~~~~~~~~~~~~
[website-critique] Optimize Images for Quick Loading

Other related posts:
