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