| |
GIF
or JPEG?
The
two most common image formats on the Web are GIF and JPEG. There
are plusses and minuses to each format. Please note the below recommendations.
While JPEG's can typically have a smaller file size, this is not
the only consideration you should make when choosing file format.
| Image
Type |
GIF
|
JPEG
|
| Photograph |
|
x
|
| Graphic
with many colors (+200) or a gradient |
|
x
|
| Simple
text as graphic |
x
|
|
| Simple
illustration, such as a chart, graph, or button |
x
|
|
| Complex
chart, graph, or button involving complex color arrangement,
such as gradients |
|
x
|
| Animation |
x
|
|
| Graphic
with transparent background (so a background image or color
shows through) |
x
|
|
GIFs
Choosy
Webmasters choose GIFs. There are two common pronunciations of "GIF."
I use both, and encourage you to do so.
Life
is nothing but a series of trade-offs, and GIFs are a great example
of that. For instance, GIFs offer absolute color fidelity—of
up to, including, and no more than 256 colors per graphic. If your
graphic has under 256 colors (like charts and sketches), you can
bet that they will be rendered with accurately. If your graphic
has over 256 colors (as most photographs do), your image processing
software will do the best it can with a representative sample of
256 colors.
See
how this affects the following photo:
GIF
(above, 56k): Note that faces are splotchy.
Complexions are much nicer in JPEG (26k) below.
JPEGs
JPEGs
have an excellent compression algorithm. When viewing the above
two graphics, not only does the JPEG look better, but the file size
is less than half that of the GIF. So that settles it, right? JPEGs
download faster, and have higher quality, so you should always use
JPEGs for your graphics.
Not
so fast. The compression algorithm of JPEGs comes at a cost with
a mysterious name: Artifacts. The background: JPEGs do not promise
absolute color fidelity, even with graphics containing less than
256 colors. JPEGs simply approximate colors based on nearby colors.
They manage well with relatively solid colors and gradients, but
can produce bumps, or grains, in areas with abrupt color shifts.
These "artifacts," in addition to degrading the image,
can degrade the viewing pleasure of your target audience. Not to
mention, graphics with a low number of colors (graphs, charts, certain
screen shots) may actually have a smaller file size when saved as
a GIF.
 |
Low-quality
JPEG (13k). Note blurriness, particularly around menu and tool
bar.
|
 |
| GIF
(9k). Low number of colors allows this format to deliver a tack-sharp
image. |
Additionally,
JPEGs can't use transparent backgrounds or animation, so GIFs are
required for such effects.
What
if you can't decide which version to use?. Try saving in both
formats and comparing in a browser. If both look the same to you,
choose the one with the smaller file size for faster downloading.
What if you still choose the wrong format? Don't worry; there is
no capital punishment for using a GIF when a JPEG would have been
better.
|
|
Have
a Web
question?
Ask
Bob
Hoffmann
|
|
