Bitmap & Vector Graphical Formats for Web Applications

There are many widely accepted bitmap and vector based graphical formats for web applications, largely based on the application reading (and displaying) the graphic at the recipient’s end. This is not to say, however, that we are limited to only the widely accepted formats as “you just need a MIME type so that the format is labelled correctly for transfer across the Web, and so that a suitable viewer (if one exists) can be located at the other end” W3C (2003).

The selection of which format is most useful for which graphic depends upon several considerations; intended use, edit-ability, file size, quality, compatibility and scalability. Bitmap based formats are generally un-scalable (although they can be scaled they lose quality) as they are pixel based whereas vector formats may be scaled as they interpret the mathematical relationships of the elements with them.

  • The bitmap based Graphic Information Format (GIF) format is most useful when a limited colour palette and/or transparency or animation is used (i.e. less than 256 colours) as this results in small file sizes and hence faster transmission across networks. This format is lossless (i.e. no loss of quality).
  • The bitmap based Joint Photographic Experts Group (JPEG) format is most useful when an image is required to be seen in high quality (up to 16.7 million colours) as the format allows for lossy compression, which is selectable to balance the quality required with the file size produced to compromise for the intended use and file size.
  • The bitmap based Progressive Network Graphics (PNG) format was a relative newcomer until the last few years when browser decided to support them. They essentially replace the GIF format as they are not covered by a commercial patent or limited to 256 colours, yet they present all of the advantages of lossless compression. The only disadvantage of PNG files over GIF files is that older browsers do not support them and they cannot be used for animation.
  • The vector based Computer Graphics Metafile (WebCGM) (as defined by the W3C) and Scalable Vector Graphics (SVG) formats, according to Lilley & Weidenbrück (2001) are scalable, size efficient, editable and easily integrated with web content with SVG being better with creative design and WebCGM being more suitable to engineering uses. The main drawback of these formats is that browser support is limited or via add-ons, which restricts their popular use.

To apply this to the different cases:

  1. Botanical drawings are generally high quality colour showing detail that is important to the end user. I would therefore suggest that the best format is a low compression JPEG file as quality is more important than file size (and hence transmission speed).
  2. Finger prints are generally in limited shades of grey with a restricted palette so I would suggest that the most appropriate format would be GIF (or PNG if the browser supported it) for fast transmission at a specified quality.
  3. A 2D cartoon character needs to be of high quality with transparency (for placing on background images) which suggests the only format that is suitable is PNG.
  4. A satellite image would normally be of a limited palette and possibly be animated to be played fairly quickly therefore a small file produced by GIF would seem appropriate as transparency could also be used if required.
  5. A photograph of yourself would normally be in full colour and a PNG would seem suitable however some applications, especially for printing reasons may require the quality of a JPEG.

References

Lilley, C & Weidenbrück, D (2001) WebCGM and SVG: A Comparison [Online]. Available at http://xml.coverpages.org/WebCGM-SVG-Compare.pdf (Accessed 13 Feb 2011).

Stanek, W 1999, ‘Bitmaps and Vectors: Web Graphics Evolve’, PC Magazine, 18, 11, p. 240, Academic Search Complete, EBSCOhost, viewed 13 February 2011.

W3C (2003) Graphics on the Web [Online]. Available at http://www.w3.org/Graphics/ (Accessed 13 Feb 2011).