Graphic
Definitions
There are two graphic
formats supported across the web in different browsers and O/S. GIF
and JPG or JPEG. They are the only image formats that you will use
on your web pages.Gif
Format
GIF is the right format for images
that are composed primarily of lines and solid colors such
as a cartoon character. A GIF is limited to a maximum of 256
colors.
GIF – pronounced
either jif or gif stands for Graphics Interchange Format. The GIF
file format uses lossless
compression (reduces the file without losing any data - GIF and
PNG both do this - PGN's are not supported across all web medians
yet) to keep file sizes as small as possible.
Avoid using the GIF format for
images with complex, subtle gradations of color such as a
photograph. For these images, use JPEG instead.
 |
Example: These
two images are perfect candidates to be saved as GIF files.
They have a limited palette of colors, and the colors are
mostly in solid blocks with clear edges. |
 |
| |
|
GIF format used to optimize a photograph not only
limits the colors but also increases the load time and
file size. The dithering (dots) are how a GIF's
attempt to reproduce the photo's original color
gradations using 8, 24, and 256 colors from the
256-color palette. JPEG is the right choice for this
image; it looks nicer and the file and load times are
smaller.
GIF
=
Line Art, Solid
Colors, 256 colors
Best with = Cartoons, Text, Lines
JPG =
Photographs, Complex Graphics
Best with = Photographs or gradients such as complex
shadows. |
8 colors 2.9k GIF
|
24 colors
4.2k
GIF
|
|
256 colors
9.7k
GIF
|
millions of colors
7.4k JPG
|
|
The GIF file format supports transparency and
animation -
neither of which are supported by the JPG format.
Transparency
When saving an image in the GIF
file format, you can choose one color to be
transparent. Depending on what graphics program you use there will
be a specific way to save your GIF with a transparency.
|
|
The
images on the left are all the same transparent GIF,
repeated six times in a table, with each table cell set to
a different background color. The transparency allows the
color backgrounds to show through. |
|
|
Here's the GIF image without
any transparency effect. See how the non-transparent white
blocks the brown background from showing through?
|
Animation
 |
You can create
animated GIF's in several graphics programs such as Fireworks,
GIF Animator, etc. Animated GIF's do not need a special
plug in to work in a browser.'
Be careful - Animated gifs are considered poor netiquette
in most cases. |
|
