Graphic Formats

Document Sample
Graphic Formats Powered By Docstoc
					Graphic Formats
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 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 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 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

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.

Shared By: