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 capture their attention.
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
A Brief Primer On
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 separately.
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
millļons 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 largėr.
Speeding Up Image
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 image's 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. Try to keep images less than 600 pixels. Modern
digital cameras produce huge images that are 3,000 pixels, far too
large for website use.
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 will.
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.
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 file.
compress a file we will lose some image quality. We have to reach
a balance between a small file size and acceptable image quality.
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% and
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. Try to keep images less than 30K in size.
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.