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.
