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.
About the Author
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.