Web Hosting Tips for Webmasters -
The Three Principles Of Image Optimization
Article printed from SiteProNews: http://www.sitepronews.com
HTML version available at: http://www.sitepronews.com/archives.html
The Three Principles Of Image Optimization
By George Peirson (c) 2005
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 separately.
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 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.
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.
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 file.
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 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.
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.
================================================================
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 www.howtogurus.com
================================================================
| 
