for more articles
Principles Of Image Optimization
|Are you losing
visitors to your web site due to slow page load times? Is your
site being penalized because the images on your site are too
large? Are you able to capture your visitor’s attention in the
first 10-15 seconds that they are on your site?
All of these problems can be caused by an improperly optimized web page. In
other words, the page loads too slowly and your visitor leaves
before you have had a chance to hook them.
Optimizing a page for quick load times can be broken down into 3 broad
categories: the basic coding of the page, scripts that are used
on the page, and images. Of these three, images that are too
large can have the most significant impact on load times and
therefore have the greatest potential for improved page loading
times if properly optimized.
A brief primer on image types
There are many image formats in common use on web sites, the three most
popular being GIF, JPEG, and to a lesser extent Flash content.
We will be limiting our discussion to GIF and JPEG images, with
a specific focus on still images.
Each of these image formats has their strengths and weaknesses. GIF or
Graphics Interchange Format was developed by CompuServe before
the Internet boom as a way to share images on the CompuServe
service. Due to limitations with screen resolutions and color
depths at the time, GIF images were limited to showing up to 256
colors, more colors were imitated by Dithering, a process of
fooling the eye into seeing one color by using 2 or more sets of
color dots spaced too closely for the eye to distinguish
Imagine a chessboard with black and white squares. When viewed closely we
can distinctly see the individual squares, but if we back off
far enough we will no longer be able to discern the individual
squares and instead we will see one large grey square, the black
and white squares merging together in our eyes to form one solid
color. This is the concept behind dithering.
The JPEG file format on the other hand is a newer format that can handle
millions of colors easily. The initial drawback to JPEG images
is that they do contain many more colors, and each color
requires some coding for display, making the file size larger.
Speeding up image load times
The main idea behind making an image load faster is to make the file size
smaller. This can be accomplished in two ways, you can either
make the dimensions of the image smaller, or decrease the amount
of coding that is required to display the image.
The easiest way to reduce an images file size is to reduce the image’s
physical dimensions. In other words, the smaller the image, the
smaller the file size. Imagine an image that is a square 80
pixels by 80 pixels. The number of pixels contained in the image
is 80x80 or 6400 individual pixels. If we reduce the image size
by one half to 40 pixels by 40 pixels we then have 40x40 or 1600
pixels. So reducing the image size in half reduces the file size
to one fourth of the original.
This is our First Principle of Image File Size Reduction: Use the smallest
image dimensions that will work with your layout. And likewise
the fewer images on the page, the fewer image pixels, therefore
the smaller the page size.
Since GIF and JPEG image formats use different methods of saving image
information, they tend to be better at showing some types of
images and worse at showing others.
GIF images, since they are limited to 256 colors per image, are better at
displaying images with large solid blocks of color and images
with very small physical dimensions. The GIF format will produce
smaller file sizes than JPEG for these types of images.
JPEG images are better at showing gradients or subtle changes from one color
to another. Therefore JPEGs reproduce photographs very well, or
any other image with gradations. The JPEG format will produce
smaller file sizes for these types of images than the GIF format
This is our Second Principle of Image File Size Reduction: Choose the
correct image format for the image you are using. Most web pages
will contain a combination of GIF and JPEG images.
Decreasing the coding is called image compression. Both GIF and JPEG images
can be compressed but the process is different. In GIF images we
try to limit the number of colors, in a JPEG image we use
software algorithms to remove redundant information from the
Whenever we compress a file we will lose some image quality. We have to
reach a balance between a small file size and acceptable image
This is our Third Principle of Image File Size Reduction: Find the least
acceptable level of image quality. Most images can handle some
compression with very little quality loss, and all images can
stand more image quality loss and still be acceptable. Your job
is to decide how much quality loss you can accept. In other
words, the lower the quality, the smaller the file size.
GIF images can usually be reduced from 256 colors to 128 colors or less, the
fewer colors used the smaller the file size. JPEG images can
almost always be reduced to a quality setting of 80
frequently can be reduced down to as little as 15-30�So when you
use a higher compression level (smaller number) the file size
will be reduced. Experiment with the image, try smaller and
smaller settings until you find the smallest setting that still
displays an acceptable quality.
The fastest loading page will have no images and the slowest loading page
will be completely filled with full resolution images. If you
work towards controlling your images using the principles
outlined above you will have a very lean web page that will load
quickly and be viewed favorably by the search engines.
About the author:
George Peirson is a successful Entrepreneur and Internet Trainer. He
is the author of over 30 multimedia based video training titles
covering such topics as Photoshop, Flash and Dreamweaver. To see
his training sets visit