Optimizing for the Web

Optimize web images for quick loading...So what exactly does "optimizing" an image mean? It's essentially reducing the file size of a picture so it loads on a Web page as quickly as possible.

DO NOT resize your images in your website design program. The result will be a small image with the same file size.


DO resize your image in your image editing program.

When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser. The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download.
 

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.
 

  1. The Best method to decrease file size for a WEB image is to decrease the quality. This does NOT mean the image will not look good on a computer monitor. Digitized images are normally at a much higher quality (resolution / dots per inch) than a monitor can display. This step alone will normally reduce the file size to 1/5 of the original. Physical size will not change (Avoid resize until final step)
  2. The Second best method (optional) is to 'crop' off any 'dead' area. For example, center the subject in the picture by cropping the borders.
  3. Using 'resize' to reduce file size is NOT very effective. (usually no more than 1/2 of the original size - even if you take the viewing size below 320 x 240 :( Resize should be used to obtain the 'physical' size you desire i.e resizing - Used alone results in an image that is not really optimized very well.

Some typical guide lines for optimizing images are shown below. These values are used by the professional webmasters (the code / layout people) that work on big business sites. In most cases, they will use the small to medium size images.

Physical Size Width x Height File Size
Extremely Large 1200 x 900 80k to 100k
Very Large 800 x 600 60k to 80k
Large 640 x 480 50k to 60k
Medium to Large 400 x ??? 25k to 50k
Small to Medium 300 x ??? 10k to 25k

Creating Thumbnails For Webpages

A typical thumbnail is about 200 x 200 or smaller. And the file size is less than 3 - 10k (depending on the original resolution / optimizing)

Thumbnail images are very small (viewing and file) size images i.e. they are resized images that are not only small physical size but small file size. Real thumbnails are NOT just images that look smaller because the are being resized with the width and height attributes of the img tag.

The benefit of a real thumbnail is that it loads a small size 'preview' images very fast. This will only happen if the file size is small. There is no real advantage using the image tag to make a thumbnail because the file size is exactly as the full image.

BTW: There are freeware programs for creating Thumbnails. One simple program that generates a simple web page is Thumbnailer .