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
Web (www.isitebuild.com/imageoptimization1). Part 2 discussed how to optimize your images for
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
large version of your image on another page. Link
small image to
larger one. When visitors click on
small image it will take them immediately to
larger image.
Pre-load graphics If you want a large image to load fast, you can pre-load
graphic on another page. Create a 1x by 1x pixel of
larger image and insert it at
bottom of an earlier page (it will appear as a dot and
visitor won't even know it is there). The browser caches
image. When
visitor arrives on
page with
large image, it appears almost immediately.
Slicing This is where you divide a large graphic into smaller pieces. This keeps
file size of
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
image size because you've told it
height and width values already. If
height and width attributes are not included,
browser has to load
entire image, then calculate its size before displaying it. Height and width attributes are inserted automatically in
HTML code by WYSIWYG page editors.