June 6, 2005:
I'm just starting to make some web graphics for my
web site. When I get the option to save the graphic, the options
are GIF, JPG or PNG. Which one should I use?
- Kate B., [removed]@aol.com
Good question! All three of those formats are
web friendly, though PNG has a lot of unique characteristics
to it that are unfortunately not widely supported yet. I'll
run down the features of these for you:
GIF: Gif is a 256 color format, so it's grainy
when used for photos or images that are photographic in nature,
which would normally appear in thousands of different colors.
However, it's excellent for logos, line art, or anything that
is "cartoon"-like in nature with large solid-colored
areas. One interesting aspect of GIF is that you can reduce
the file size by only including the colors that are required
for the image, not all 256 -- so if you have an image that is
just black, blue, and red, those are the only colors you would
need to include. Additionally, a great feature of GIF is that
it considers transparency, the lack of a color, as a color too.
So, you can make areas of your image transparent, allowing the
background of your page to show through.
The most exciting feature of GIF, however, is
animation. The GIF file format allows you to store different
frames of an image within the same image, and each frame can
be assigned a timespan in which it will display. So, simple
animations (think a picture book, where each page changes the
image a little each time, but when the pages are flipped together,
the animation is fluid) can be accomplished easily with GIF.
JPG contains thousands of colors, but it's a "lossy"
format. This means that in reducing file size, JPG looks at
the pixels in a certain area of your image and approximates
colors between them to reduce file size. The greater the approximation,
the smaller the file. You have to carefully balance the quality
reduction in the image against the file size though. Because
JPG's compression contains this color approximation, it is best
used for photographs, where small variations in color won't
be apparent. JPG isn't as good for logos, line art, and the
kinds of solid blocks of color that GIF really shines at for
the same reason -- degradation in quality.
One caveat in working with JPGs is that each time
you save them, they will recompress (and lose quality.) If you're
doing quite a bit of work on a JPG, it's better to save it as
a TIF until you have a final version. To see this phenomenon
in action, you could try opening a JPG, saving it, then reopening
it, saving it, ad so on -- the quality degradation will quickly
become apparent. JPG does not support transparency either.
You may be thinking that it would be the best
of both worlds if features from GIFs and JPGs could be combined,
like transparency, animation and full color images. That format
is PNG. PNG has been around since the mid-90s, but browser support
for it has been spotty at best. PNG combines up to 48-bit color
with transparency and the ability to support animation (with
the MNG file extension.) Sizewise, PNG creates a larger file
than JPG, but smaller to about the same as GIF. PNG's handling
of transparency is phenomenal -- because transparency can be
applied to an alpha channel, vs. having one color become transparent,
as in GIF, a PNG image with a transparent drop shadow can be
placed over any page background and look the way the designer
intends. However, the Internet Explorer browser still doesn't
fully support all of PNG's features, so designers are still
"stuck" with GIF and JPG for the most part.
I would recommend as a rule of thumb, if it's
a photo, make it a JPG; if it's graphic in nature, make it a
GIF.
Got a question for the webmaster? Email
it to askthewebmaster@newramp.com!
Ask The Webmaster is written biweekly by Jill
Cataldo, Senior Web Developer for NewRamp.com. She has been
working in web development since 1996. Articles are copyright
©2005 NewRamp and may not be reproduced without permission.
Visit the Ask
The Webmaster Archive
