Compression is one key to making a small graphics file. The two types of image file formats most commonly accepted by Web browsers are GIFs and JPEGs. One difference between them is that GIFs must be 8-bit or less and JPEGs can be 24-bit.
GIFs
Graphics Interchange Format or GIF is pronounced, "gif"
or "jif". GIFs can only contain 256 colors or less.
GIFs use LZW compression (based on work done by Lempel-Ziv &
Welch), which is a lossless method of reducing file size. Lossless
compression technique reduces the size of a file without sacrificing
any of the original data. In lossless compression, the expanded
or restored file is an exact replica of the original file before
it was compressed.
Two Types GIFs
There are two types of GIFs: GIF87a and GIF89a. GIF87a is the
standard, more common GIF file format. GIF87a's are generally
called plain old GIFs or CompuServe GIFs. GIF89a is subset of
the GIF87a file format. GIF89a adds the ability to tack on extra
information to the file, such as transparency. GIF89a's are often
called Transparent GIFs or TGIFs.
GIF89a or Transparent GIFs have regions that are selected to mask out, and become invisible. TGIFs are used to create the illusion of irregularly shaped graphics, by assigning one color in a graphic to be invisible. This process is often called masking. The image appears to "float" on top of the Web page instead of being stuck inside a rectangular prison. Transparent GIFs are recommended for Web pages that have patterned backgrounds, as the same effect can be achieved for solid backgrounds by using other techniques.
How GIF Compression Works
The pixel transitions within a document are scanned and file size
increases as the color changes on a horizontal axis are identified.
To demonstrate how a GIF file size changes, based on pixels, here
are two sample images. The exact same image is rotated so the
lines run horizontally. The file size increased simply by rotating
the image.
When to Use GIFs
GIF is an excellent compression scheme for graphics, cartoons,
line-art and flat-illustrations. In order to save an image as
a GIF, the file must not be over 256 colors or 8-bit. It is not
as efficient when compressing dithered graphics, because dithering
introduces noise (this increases the number of transitions per
scan line).
Dithering is a process that arranges pixels (little "dots" on the screen) of varying shades to achieve a visual effect, often a simulation of a different color. For instance, a pattern of black and white pixels can be used to simulate gray. By varying the ratio of white pixels to black pixels, you get different shades of gray. Dithering often provides excellent approximations of colors that are not available.
Interlaced GIFs
Interlaced GIFs can be either GIF87a's or GIF89a's. Interlaced
GIFs appear on a Web screen in chunks, starting at low resolution
and resolving after several seconds to their finished form. This
causes the graphic to appear sooner than if it had to download
fully before becoming visible. The advantage to using interlacing
GIFs is that it makes the graphic appear quickly in lower resolution.
Interlaced GIFs also allows the HTML body text (in the bounding
box as defined in the HTML document) to appear faster on a page,
before the graphic fully appears. The graphics appear faster in
lower resolution, which works great for images that are readable
at chunky resolution.
Animated GIFs
GIF89a allows developers to create images that flash, wiggle,
move, and morph. While Java and CGI scripts all let developers
add motion to Web pages; animated GIFs have some advantages over
these technologies. Animated GIFs are easy to create and they
do not tax the server. A GIF89a animation file format is inserted
into HTML document the same way as a regular GIF image. No additional
programming is involved. Animated GIFs technology has been around
for years. Netscape revived interest in the technology when release
2.0 Navigator supported animated GIFs.
How Animated GIFs Work
GIF89a has the ability to layer GIF images one on top of another.
The images are stacked like pancakes, cycling through and looping
creating the equivalent of an animation flip book. To view images
created with GIF89a, it is downloaded once from the server and
then reloaded from the browser's cache on subsequent iterations
of the loop. Two of the best applications for building an animated
Web page are a Macintosh freeware program called GifBuilder, by
Yves Piguet, and a Windows shareware application GIF Construction
Set, by Alchemy Mindworks.
Limitations of Animated GIFs
Many of the browsers do not support animation. Some browser's
show only the first or the last frame of the animation. An animated
GIF increases the file size of a normal GIF. Sound can not be
attached animated GIFs. Blinking text has been abandoned because
it is annoying. Avoid making the same mistake with animated GIFs.
Avoid using distracting, annoying, blinking animation.
JPEG
JPEGs were created by the Joint Photographic Experts Group and
is pronounced, "jay-peg". JPEG can work with 24-bit
(16.7+ million colors) images and still produce files that are
small enough to meet online standards. JPEG was developed specifically
for photographic-type images and does a great job of compressing
those types of images. It does not work well for graphic-based
imagery, such as line drawings, illustrations, type design, and
cartoons.
How JPEG Compression Works
A JPEG file is stored as one top-to-bottom scan of the image.
JPEG uses a "lossy" compression scheme that reduces
image file sizes as much as 100:1. JPEG is designed to exploit
known limitations of the human eye, notably the fact that small
color changes are perceived less accurately than small changes
in brightness. Thus, JPEG is intended for compressing images that
will be looked at by humans. In lossy compression technique, some
data is deliberately discarded in order to achieve massive reductions
in the size of the compressed file. The degree of lossiness can
be varied by adjusting compression parameters. This means that
the image-maker can trade off file size against output image quality.
JPEG images are compressed when they are saved in a graphic program,
and then decompressed when they are viewed by a Web browser. This
means that with decompression time, a small JPEG file with more
colors might still take longer than a larger GIF file.
When to Use JPEGs
JPEG is ideal for photographic and organic images. JPEG compression
works better on images with small color changes, such as subtle
lighting changes. JPEG does not work well on images with lots
of area of solid color like line art cartoons, flat-style illustrations,
and graphics with lettering or hard-edged shapes in them. Different
JPEG compression setting are available. For example, Adobe Photoshop
has quality settings of maximum, high, medium and low. A low quality
setting gives the most compression. Typically, a photographic
image will show very little image loss, at least for web design
purposes, even at the low quality setting.
Progressive JPEG
Support for Progressive JPEG has been introduced by Netscape Navigator
2.0. This alleviates the old problem of long JPEG decompression
delays. Progressive JPEG divides the file into a series of scans.
The first scan shows the image at the equivalent of a very low
quality setting, and therefore it takes less time. Following scans,
gradually improve the quality.
The advantage of Progressive JPEG is that if an image is being viewed on the fly as it is transmitted, one can see an approximation to the whole image very quickly, with gradual improvement of quality as one waits longer.
Limitation of Progressive JPEG
Each scan takes about the same amount of computation to display
as a baseline JPEG. So Progressive JPEG only makes sense if one
has a decoder that is much faster than the communication link.
That means Progressive JPEG works well with more powerful personal
computers.