The Three Principles Of Image Optimization!
|
| by George Peirson |
|
|
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 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 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.
|
|
|
| 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 www.howtogurus.com |
|
|
|
|
Create
PDF eBooks Instantly!
Still No PDF Download
Option For Your Customers Because Your Brain Just Shrivels
Up When You Try To Buy/Use Adobe Acrobat software?
Now, You Can Point And Click Your
Way To Instant, Hassle-Free PDF Publishing ... Using One
of The 33 Free To Nearly Free Tools!
Order Now and Receive Master
Resell Rights, Keep 100% of The Profits!
(This Offer May End At Any Time)
|
|
|
|
Easy
PDF Publisher's Toolkit
Create
PDF Files From Any Printable Document in a Few Simple
Clicks!
"Finally
There's an EASY Way To
Publish Stunning PDF Files,
Without Wasting a Lot of Time and Money"
|
|
|
|
|
 |
Translate
Page!
    |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Newsletter |
|
Sign-Up for The Business
Junction Newsletter and Get "FREE" Newsletter Sign-Up Software, Specials Updates, Product
Updates and MUCH MORE!  |
|
|
|
|
|
