The guiding principle is... use as little as possible!
Preparing images for the web is a process of compromise:
The larger the file, the higher the quality - the longer the download time.
The goal is to get acceptable quality at the smallest file size and shortest download time possible...
A Little Explanation
(First a word about formats. You have two choices, GIF or JPEG.
The wisdom is use GIF for graphics and JPEG for photos. What follows applies
mostly to GIFS, where you are given these options. JPEGS make the choices
for you based on your selection of Low, Medium, or High quality).
Okay....
It's easiest to think of your image as a mosaic made up of square,
regularly placed, solid colored tiles. There is one important limitation:
You only get 256 different colors!
With that in mind, you have three choices to make in creating your
image....
1. RESOLUTION... or how big your tiles are going to
be (how many per inch).
2. PALETTES... what box you are going to choose your colored tiles
from.
3. COLOR DEPTH ... how BIG a box of colors you are going to use.
Resolution.
The Resolution you choose will determine how many tiles you use in all - lots and lots of little tiles (a BIG file), or fewer, bigger ones (a smaller file).
The fewer tiles it takes to fill a given area, the smaller your file
will be (on the computer it is measured in pixels per inch, or ppi).
The downside, obviously, is the fewer tiles you use, the bigger those
tiles have to be, and the less detail you will be able to achieve.
But for computer graphics I generally use 72ppi, the standard screen
resolution (for Macintosh, anyway) (since anything higher would be wasted because the computer
can't display anything higher).
Palettes.
Basically in creating your image you have two boxes of colored tiles to choose from:
The SYSTEM PALETTE or an ADAPTIVE PALETTE.
The System Palette
If you choose the System Palette, your box of tiles is a fixed set
of 256 colors.
Since it is sort of an all purpose box of colors, some of ALL the colors
of the spectrum have to be there. So you don't get many variations of any
one of them. If your image needs a color (a tile) that isn't there, you're
out of luck. You will get the next best thing.
But using the System Palette usually gives you smaller files...
And your image looks the same on any monitor, whether it is displaying
hundreds of colors or more.
The Adaptive Palette
If you choose the Adaptive Palette, the computer fills your box of
colors with only the colors you need.
If your image has lots
of different greens, where the System Palette may have only three, the
Adaptive Palette could give you up to 256 (if ALL you needed were greens!). But if you need MORE than that, sorry! You're out of luck!
I generally end up using the Adaptive Palette.
The drawback is that an image that looks great displayed in thousands of
colors, doesn't look quite the same displayed in hundreds of colors (for
some reason I don't understand at all).
(There is a THIRD Palette choice, and that is to load a CUSTOM PALETTE
(like, say, the default palette for Navigator)... but I don't know how
to do that!)
Color Depth
This is kind of like deciding whether to use the Box of 8 Crayolas or the Deluxe box of 64. You have to decide how many DIFFERENT colors you will use, generally
in steps of 16, 32, 64, 128, 256. (Again, your Palette selection will determine specifically WHAT those colors will be. Color Depth determines HOW MANY).
The fewer different colors you use, the smaller your file.
But again, the fewer colors you use to create your image,
the more you are going to have to use a color that only approximates the
color you really want.
This matters most in images that have a lot of grading from one color to
another. Since each colored tile you use is a solid color, you have to
create gradations by stepping up or down from one colored tile to another.
If you have LOTS of tiles in the related color, you can make smaller steps.
The shading will appear smoother. If you only have a few tiles to choose
from, the steps from one color to the next will be larger, and the shade
less smooth.
This is where I do lots of experimenting.
If my image has lots of
different colors, I start with maybe 128 colors. If that looks bad, I jump
to 256 (and live with that!). If it looks good at 128, I try it at 64 to
see if I could live with that. If that looks okay, I try 32 to see if I
can get away with that. Lots of times I can! And the file is a LOT smaller.
The idea is to choose the smallest number you can live with!
Now...
all of the above applies mostly to GIFS, where at some point you
should have those choices to make.
If I am saving in JPEG, I basically save in each of the three options (Low,
Medium, or High), and pick the one I like best.
I tend to prefer GIFS because I like having that level of control.
And I have found that a GIF displayed in thousands of colors looks better
than an equally sized JPEG (but that same GIF displayed in hundreds of
colors won't look quite so good - usually about the same as the JPEG).
Also GIFS support transparency.
A Transparent GIF is one that seems to float over the background color
or image. (you need to save in the format GIF89a). JPEGS can't do that.
A Final Word
Of course all of this depends on the software you are using! if you
scout around the Web you can find all kinds of image creating and converting
software.
I use Photoshop, and am really happy with the GIF89a plug-in (I like it because
you can see a preview of your choices before you actually save it).
All that being said...
Here is your Inn image in two much smaller filed versions. (Your original file was 374k).
(On my monitor set at thousands of colors the GIF looks much nicer. But if I switch my monitor from Thousands of colors to Hundreds (or 256), the GIF loses some quality, while the JPEG stays pretty much the same. Try switching back and forth on yours and see if it makes a difference.)
