Graphics Optimization
by Richard Lowe, Jr.
articles@internet-tips.net
http://www.internet-tips.net
Autoresponder Address: article-214@internet-tips.net
Graphics images on the internet come in three major formats:
GIF, JPEG and PNG (and PNG's close relation MNG). Each of these
formats has it's associated advantages and disadvantages. It is
important that you understand all three formats to make the
correct decision as to which to use under what circumstances.
One of the major factors to consider when choosing or using
a graphics format is the size of the resultant image file. In
addition, you will need to understand how to optimize images in
each format to be cognizant of the results that you can gain.
What is image optimization? It is simply defined as finding
the correct compression settings to make the image as small as
possible with as little loss of resolution as you can get away
with. Why is this necessary? Because it take time for images to
be loaded (most people are accessing the internet over dialup
connections, after all) and optimization reduces that time.
The first and most primitive graphics format is known as
BMP, which means bit mapped. These kinds of images may not be
compressed as they are simply an exact description of what is
to be shown on the screen. Each pixel is represented by 3 bytes
(red, blue and green), and each byte contains the color
intensity of it's base color. This BMP images can be made up of
16 million colors. BMP files tend to be very large, and you
don't see them directly on web pages very often. Where you will
find them is in collections of wallpapers (wallpapers in the
system directory must be in BMP format), desktop themes and
similar things.
Because BMP files were much too large for normal web
browsing (especially several years ago when virtually every
user was not only on a dialup connection, but was lucky to get
4800 or 9600 baud) other formats were invented. Two of these
formats became dominant and are
now found just about everywhere. These are the GIF and JPEG
images types. The formats are extremely different and have
widely separate applications. Your average web site will
generally include a mixture of both formats, as each has their
use.
GIF was created by CompuServe in 1987 for their online
service. GIF images consist of no more than 256 colors, because
each pixel is represented by a single 8-bit byte. This means
that in order to convert a BMP image to a GIF image you have to
discard all but 256 colors at the most!
Each GIF image has a description (known as a header) that
defines the colors that will be used in the image. This allows
the colors to be assigned to a code which is what actually
appears in the image. Thus, the header might say "red is
color #47, bluegreen is color #48" and so on. Later in the
image, the colors can be represented as "color #47 is used
for the next 546 pixels".
Thus the optimization of GIF images is fairly
straightforward and is handled by virtually every graphics
program on the market. For example, Paint Shop Pro allows you
to export an optimized GIF image with a very cool wizard to
help you choose exactly the best options. Using the optimizer
it is possible to reduce an image file size by 95% or more!
This means a 100k image can be reduced to 5k or less by this
method of optimization.
On the other hand, JPEG images use an entirely different
compression scheme. JPEG was invented in 1991 by the Joint
Photographic Experts Group to display photographs and similar
type images. JPEG has the advantage of allowing 16 million
colors. However, JPEG compresses by throwing away pixels.
For example, suppose you have a photograph that is 1024
pixels wide. JPEG compression might be specified to throw away
10% of the pixels (every 10th one). When the image is
decompressed those pixel values are extrapolated from the
colors of the surrounding pixels. This implies that JPEG images
tend to become "fuzzy" when the optimization values
are high.
As it turns out, JPEG is great for photographs and similar
things because those types of images tend to have soft edges.
In fact, for photographs and art the JPEG format is much
preferred.
PNG is an up-and-coming, very new image format which is
similar in concept to GIF. PNG images allow for 16 million
colors and, unlike JPEG, does not lose colors. PNG compression
is handle by most graphics editors, at least those that support
PNG.
So how do you optimize your images? First, find the best
format for your applications. PNG is very new and is probably
not suitable for most web sites (browser support is sporadic so
you may lock out some of your users). GIF is great for line
drawings and other things with sharp edges and no more than 256
colors. JPEG is perfect for photographs, art, and similar
images.
Second, be familiar with the optimization functions of your
graphics programs. Save images using the various settings and
closely examine the differences. For example, how does that
image look in 2 colors, 16 colors and 256 colors? Find the
correct setting (the smallest possible file size with the least
change in the image quality) and use it. Remember that this
setting will be different for every single image.
What do you gain from all of this work? Faster loading times
on your web site, which means your visitors are less likely to
hit the back key even before your site begins to load.
Additional Information
Graphics Formats - Animated GIFs
http://www.internet-tips.net/Graphics/animatedgif.htm
Use animated GIFs to create moving images on your web site.
Just remember not to overdo it.
Graphics Formats - GIF
http://www.internet-tips.net/Graphics/gif.htm
The GIF format is an excellent format for many types of
graphics.
Graphics Formats - JPG
http://www.internet-tips.net/Graphics/jpg.htm
JPG is best for images with gradients, blends and inconsistent
color variants. It is very efficient but parts of the image are
lost by the compression scheme.
Graphics Formats - PNG
http://www.internet-tips.net/Graphics/png.htm
The PNG format is a newer, better format than GIF. It may soon
be the dominant format on the internet.
Products - GifClean32
http://www.internet-tips.net/Products/gifclean32.htm
GifClean32 allows you to remove comments from GIF images. It is
a handy little utility to have around.
Richard Lowe Jr. is the webmaster of Internet Tips And
Secrets at http://www.internet-tips.net
- Visit our website any time to read over 1,000 complete FREE
articles about how to improve your internet profits, enjoyment
and knowledge.
To see a list of article available for reprint, you can send
an email to:
article-list@internet-tips.net
or visit http://internet-tips.net/requestarticles.htm
