Although hundreds of graphic file formats
exist web browsers only support a few of them. This
article describes the different graphic file formats
that are available to web designers and when they should
be used.
The graphic file formats supported by most popular
web browsers are Graphic Interchange Format (GIF),
Joint Photographic Experts Group (JPEG), Portable
Network Graphics (PNG) and vector graphics. Some of
the properties of graphic files are:
Transparency – this property allows the image to
be varying degrees of opaqueness from solid to completely
transparent (see-through).
Compression – this property allows the image to
be stored in a much smaller file by using a mathematical
algorithm to handle groups of pixels as a single item.
Interlacing – Interlacing allows the image to
be loaded by first drawing the odd rows and then going
back and drawing the even rows. It allows the visitor
to see the picture sooner.
Animation – Animation gives the appearance of
movement by using a series of successive still pictures.
Animated gifs do not require a browser plug-in and can
work on almost all devices.
Progressive loading – Progressive loading is similar
to interlacing in that it only loads a portion of the
picture initially but is not based on alternating rows
and allows the user to see the picture quicker.
GIF
GIF was originated in the 1980 and was adopted by
web designers in the early 1990s as the preferred
graphic format for web pages. GIF files use a compression
algorithm that keeps file sizes small for fast loading.
They are limited to 256 colors (8 bits) and support
transparency and interlaced graphics. It is also possible
to create animated graphics using the GIF format.
All browsers can display GIF files.
GIF Advantages:
Most widely supported graphic format.
Diagrams look better in this format.
Supports transparency.
JPEG
JPEG files are compressed but support “true
color” (24 bit) and are the preferred format
for photographs where image quality matters. JPEG
supports a progressive format that allows for an almost
immediate image that will improve in quality as the
rest of it loads.
Unlike a GIF file, the compression for JPEG files
can be controlled by the web designer, which allows
for different levels of picture quality and file size.
All browsers can display GIF files.
JPEG Advantages:
Large compression ration mean faster download speeds.
Produces excellent quality for photographs and complex
drawings.
Supports 24-bit color.
PNG
PNG is a fairly recent format that was introduced
as an alternative to GIF files. PNG supports up to
24 bit color, transparency, interlacing and can hold
a short text description of the image’s content
for use by search engines.
Unfortunately, most browsers do not support PNG and
the ones that do support it, don’t support all
of its features yet. But that will change in the future.
PNG Advantages:
Overcomes the 8-bit color limitation of GIF.
Allows text description of the image for search engine
use.
Supports transparency.
Diagrams look better than they do in JPEG.
Vector Graphics
Most web graphics are raster images or bitmaps, which
consist of a grid of colored pixels. Drawing and illustrations
should be created as vector graphics which consist
of mathematical descriptions of each element that
makes up the lines shapes and color of the image.
Vector graphics are created by drawing programs such
as Adobe Illustrator and Macromedia Freehand and are
the graphic artists choice for creating drawings.
Vector graphics must be converted to either GIF, JPEG
OR PNG format to be used on a web page.
Which Format Should You Use?
A web designer could choose either the GIF or JPEG
format for most uses. But, since the file size of
a GIF is usually small than the file size of a JPEG,
most web designers will use the GIF format for backgrounds,
boxed, frames and any other graphical element that
look fine using 8-bit color.
Most designers will select the JPEG format for photographs
and illustrations where the compression doesn’t
compromise the visual quality of the image.
As PNG becomes fully supported by most web browsers,
it will probably replace GIF as the web designer’s
choice for non-photographic page elements. However,
GIF will still be used for animation.
Bottom Line – GIF and JPEG are universally
supported and the web designer’s choice is determined
by the graphic element being used.
