How to Prepare Images for Your Web Site – Part 3
Copyright 2002 Herman Drost
Image optimization significantly improves your site’s
effectiveness. Whether your success is measured in revenue per
user,
page views, unique visitors, or pure profit, accelerating
your Web site makes a huge difference.
Part 1 of this article discussed when to use images for your
web site and what image file formats to use on the Web
(www.isitebuild.com/imageoptimization1).
Part 2 discussed how to optimize your images for the Web.
(www.isitebuild.com/imageoptimization2).
Part 3 will present more ways to optimize your images so
your web pages will be fast loading.
Studies show that a one-second improvement reduces click-aways
up to 65%. Faster page views means more page views and a better
user experience. This leads to higher user retention and
therefore more revenue.
Here are a few ways this can be done:
Creating Thumbnails
Make 2 copies of your large image in your favorite image
editing software (Fireworks or Photoshop). Make a small
“thumb-sized” version of your large image and put it on
your first page. Put the large version of your image on another
page. Link the small image to the larger one. When visitors
click on the small image it will take them immediately to the
larger image.
Pre-load graphics
If you want a large image to load fast, you can pre-load the
graphic on another page. Create a 1x by 1x pixel of the larger
image and insert it at the bottom of an earlier page
(it will appear as a dot and the visitor won’t even
know it is there). The browser caches the image. When the
visitor arrives on the page with the large image, it appears
almost immediately.
Slicing
This is where you divide a large graphic into smaller
pieces. This keeps the file size of the images smaller enabling
them to download faster. Slicing a graphic can also help with
design and layout of your web site.
Use Height and Width Attributes for your Images.
The browser doesn’t have to calculate the image size because
you’ve told it the height and width values already. If the height
and width attributes are not included, the browser has to load
the entire image, then calculate its size before displaying it.
Height and width attributes are inserted automatically in the
HTML code by WYSIWYG page editors.
Don’t use the height and width attributes to make a graphic
appear smaller on the page than its actual size; this just
creates a larger download time plus added computer processing
time. Resize the graphic in your image editing software instead
and use it in your page at its true size. ui and ux design services