Choosing the most suitable graphic format for website development
Your choice of file format for displaying graphics on your website will depend on the type of image you want to display (whether it be a photograph or line drawing), the display quality and the image's intended purpose. This article discusses some of the advantages and limitations of the two most common graphics formats used on the Internet - GIF and JPEG.
GIF (Graphics Interchange Format) Format
Often considered to be the most versatile of the two file formats, GIF image files are relatively small in size, provide the ability to set transparent regions and offer basic animation functionality.
When choosing to use the GIF file format, however, you should take into consideration that the image's colour palette is restricted to a maximum of 256 colours. The compression algorithm used to reduce the size of GIF files also favours images with large areas of the same colour rather than separate colours for each individual pixel, as is common with most photographic images. For most small photographic applications, however, GIF files suffice very well.
Excellent results can be achieved using GIF images for line drawings and diagrams that do not exceed 256 colours. If you intend to use GIF images to display photographs, however, you will need a quality image editor in order to achieve good results. A quality image editor should provide you with fine control over the file's colour palette as you will need to reduce the colour depth of photographs to 256 colours. There are several methods used by image editors to reduce the colour depth - you will need to choose a method that is suitable for the file you are working with and favours quality and size.
There are two versions of GIF files - version 87a and 89a. Most image editors will give you a choice over the format. It is recommended, however, that you choose the 89a file format whenever possible, as it also gives you the opportunity to set transparent areas of the image.
Images can also be saved in an interlaced and noninterlaced format. The option you choose will depend on the way you want the image to display on the screen while it is being downloaded off the Internet. If an image is saved in the interlaced format, priority will be given to displaying the full-sized image as quickly as possible - as the download begins a low quality, full-sized version of the image is drawn which improves in quality as the file's downloading progresses. Noninterlaced GIF files, on the other hand draw the full quality image from the top down. This means that while the sections of the image that are displayed during the download are in full quality, visitors to the website must wait for the entire image to download until they can see it in its entirety.
As mentioned earlier, transparent regions can be set for GIF files in the 89a format by designating one of the colours in the colour palette to be rendered as transparent. In other words, where the opaque colour would usually be drawn, the background where the image is positioned on is drawn instead. This is very useful for website developers, particularly when non-rectangular images need to be positioned on top of a textured background. Small transparent images that are one by one pixel in size can also be used for precise positioning of elements on a website. Simply use the <img> element's element's height= and width= attributes to size the image into any sized non-intrusive content-holder as is required.
Simple animation can be achieved using GIF files by alternating between several frames. The methods of rendering the images as part of the animation as well as the interval between the displaying of each frame can also be specified.
JPEG (Joint Photographic Experts Group) Format
GIF images, as discussed above are excellent choices for displaying line drawings and diagrams. However, they lacking suitability for displaying high resolution photographs. This is where the JPEG file format takes over. It should be noted that unlike the GIF file format, JPEG images produce quality results for photographs, but diagrams and line drawings may lack detail in this format. In addition, it is also not possible to specify transparent regions or animate single JPEG files.
JPEG files support images with colour palettes containing several million colours, and therefore, do not need to have their colour depth reduced. A detailed file compression algorithm is also part of the format, which allows you to weigh up file size with image quality.
Other Formats
The GIF and JPEG file formats are just two of the most common graphics formats used on the Internet. They are supported across several operating systems, produce relatively small file sizes (which is very important for website development) and are very versatile. There are also other file formats used on the Internet. Although they were not very common in the past, their popularity is increasing. The PNG file format, for example, is an alternative to GIF files. PNG files maintain all colour information and use a compression algorithm that does not degrade the quality of the image.
Where to from here?
Whether you are creating your own website's graphics or using graphics from a third party, having knowledge about the various graphics file formats you work with is indispensable.
