We are all on this Earth for such a short time. Please ask yourself
when designing your pages, "Is this important enough to steal a
minute of a person's life?" Think of it this way, if 26 Million
people lose a minute waiting for your unnecessary or improper images
to load, you have effectively killed one person.
Graphics are science and an art unto themselves. The objective of
this section is to provide you with some advice and pointers in
both selecting the right format for the task at hand, and to help
you use that format to your best advantage. Learn to strike the
proper balance between beauty and speed.
Why this is not a tutorial on how to draw.
I am a terrible artist. My wife won't even let me play with the
kid's crayons. I am not very mechanically inclined, and
owe much of my success and longevity to date to avoiding using
power tools and limiting my auto repair work to filling the gas
Aware of my weakness, I take advantage of public domain images
that meet my needs, or modify them using various effects to
achieve my desired result. No matter how good or bad an artist
you are, the basic technical aspects of images must be
understood to create effective web pages.
So what are we doing here?
I am sure as you have been working on your pages you have
been using graphics for one or more of the following reasons:
To illustrate the subject being discussed on the page.
To liven things up from an artistic standpoint.
To have them because everyone else seems to.
As you have been out either harvesting artwork or creating your
own, I am certain that you have run across two different types
of image files: the GIF and the JPG.
(actually, JPG's real name is JPEG, but since the files are
normally named 'JPG', we will call it JPG for short!)
Now that we
know we are not talking about peanut butter, let's make this
rather complex subject simple by using real life examples.
What is a JPG image?
A JPG image file is a format created by the Joint Photographic
Expert Group. JPG files are best suited for complex images such
as photographs and very intricate graphics. The features of JPG
Can have up to 16.7 Million colors in an image.
Uses a method of compression (squishing) that is called
lossy. This means that the image suffers some loss
of quality or distortion.
Most graphics editors allow you to control the trade off
between compression and quality.
Most of the time the controls in the graphics editors
that control the trade-offs make no sense to anyone!
Cannot be made transparent. This is a feature that
GIF offers and will be discussed later on.
As a general rule, a complex image with many colors will be smaller
as a JPG than a GIF file. So if you are presenting a photograph,
JPG is usually the way to go.
What can I do to make my JPG images load faster?
Take a close look at the two identical pictures below. You can
see that they are very detailed and colorful. Are you sure they
are really the same?
Don't start playing Where's Waldo! The difference between
the two pictures is that the one on the left contains about 27,000
distinct colors and the one on the right only 256. The file on the
left is 34,000 bytes and the one on the right about 17,000. This
means that the picture on the right will load twice as fast
as the picture on the left. The difference in quality is very
hard to detect, but you just saved your reader some time.
It is important that when you reduce colors that you do
not use dithering. The process can actually wind up increasing
the size of your picture file.
Another trick is to reduce the size of your image, not with
the HEIGHT/WIDTH attributes of HTML, but with your graphics
editor. Be careful of distortion and color loss.
You can also present what are referred to as thumbnail
images. These are tiny pictures representing the full size ones.
You then make the small image a link that if selected will then
display the larger image. This way you give your reader a choice
as to whether they want to see the big picture. (pun intended)
Why can't I use JPG for everything?
I the example below are two images. The one on the left is
a JPG and the one on the right is a GIF. If you look closely
you will see that there is a substantial amount of distortion
in the JPG image. The GIF image is crystal clear and quite
But wait, there's more! The JPG picture is almost three
times the size of the GIF. 6,000 bytes vs 2,000 for the
As I mentioned earlier, JPG is good for compressing complex,
detailed pictures. It is also lossy which means that
some details are lost when the image is compressed. In the
case of simple graphics, the JPG format is obviously the
What is a GIF Image?
The GIF format is another form of image compression.
There are two GIF standards, the one we are working with
is called 89a.
As you can see from our last example in our JPG
discussion, it is great for simple graphics. It also
has the following features, and limitations:
The image can contain up to 256 colors and no more.
You can reduce image size by using less colors.
One color can be selected to be the background color
which allows the underlying page color to show through.
This is called transparency.
Can also create an effect called interlace where
the image is drawn as a blur that comes into focus as
the image loads.
The process is lossless. The image suffers no
loss of quality when compressed.
When created with an animation editor, multiple
GIF images can be put together like a set of cartoon
cels, allowing for simple moving pictures.
When should I use a GIF Image?
It is very evident that the GIF format is completely different
from JPG. As with any tool, picking the right one for the job
at hand. GIF is the ideal choice of format in the following
Nice, bold page banners.
Simple icons, especially arrows and such.
When you want a transparent background.
If you need animation.
What is this transparent background you keep mentioning?
The GIF-89a standard allows you to pick one color that for
practical means, is invisible to the browser and allows the underlying
color or image to show through.
Then two images above are in fact identical, except for one minor
detail. The image on the left I created telling the graphics editor
to make the background color purple (which is not a color I used).
The image on the right has its background color set to black. Our
obedient browser is displaying the images just as I intended.
You should be aware that most graphic editors set the default
background color to black. This is not always desirable.
Do your GIF images suffer from the JAGGIES?
Christine has THE CURE!
If you haven't already, please review the pages on this site
having to do with colors and general page design guidelines. As
with the rest of this site, expect more information on this
subject over time, so stay tuned...