GIF (Graphic Information Format)
GIF graphics format is best for images with only a few colours: charts, graphs, or
text set as graphics. The fewer colours you use, the more efficient GIF files are.
GIF files...
- can contain up to 256 colours.
- support a feature called transparency, in which one colour out of the 256 colours
is set to be transparent. This keeps your graphics from looking as if they're in
boxes, because the background of the file is invisible, letting the Web page's background
show through.
- can be animated. Inside a single file is stored many picture frames and an index
telling how long each frame should be shown. Animated GIF is treated as a standard
image file, so it is loaded with the standard <IMG> tag.
- are lossless, which means the image quality is not degraded by the compression
process.
- can be interlaced so they appear to fade in, from lower to higher quality, while
loading. This gives your visitors something to look at while they're waiting.
- are not good for photographs - you lose quality and the files won't be compact.
Use JPG graphics format for photos.
JPG (Joint Photographic Experts Group)
JPG graphics format is best for images with many colours, such as photographs or
scanned artwork.
JPG files...
- can contain up to 16 million colours.
- support variable compression. You can apply more or less compression to each individual
image. The more compression you apply, the more quality you lose. While file sizes
can be made quite small with this graphics format, you often have to compromise between
file size and picture quality. Newer graphics software gives you a preview before
you save - this allows you to experiment with various levels of compression to choose
the best compromise between quality and file size.
- come in three types: baseline or standard, baseline optimised or standard optimised,
and progressive. Baseline was designed for browsers that we'd consider to be ancient
these days (such as Internet Explorer version 1). Baseline optimised offers more
compression over standard baseline, and practically every browser today can read
such an image. A progressive JPG, like an interlaced GIF file, builds as it downloads,
going from a crude representation of the image to its finished look. While this is
a nice Web graphics format, older browsers don't all support this format.
- are not good for images with only a few colours, such as text set as graphics or
images with areas of flat colours. If you use JPG for these graphics, they will be
larger than necessary, and look "mottled."
PNG (Progressive Network Graphics)
PNG is the newest Web graphics format.
PNG files...
- are supported by all modern browsers. These files may not appear in older browsers,
so using this graphics format may cause some of your Web site visitors to be unable
to see your images.
- are compact and versatile and can combine the best features of GIF and JPG, such
as the ability to have transparent backgrounds or the ability to contain images with
millions of colours.
- are still not widely used, mostly because they're not supported by older browsers.
