Help      |      Chebucto Home      |      News      |      Contact Us     

51. Post web images in choice of formats

By Mark Alberstat

When building a website, choosing the right images to go along with the text and layout is essential for the site to be well-received. If the site is about your recent trip to Disney World, the choice of pictures will be obvious. What many people don't realize is that there is a small variety of image formats to choose from and they are not all ideally suited to all uses.

With the popularity of digital cameras, people can easily now post many images to a website showing each stage of their vacation, home-building project or whatever else their site is designed for. Most cameras, however, save pictures in tiff format, a file type which is not acceptable for web pages. These pictures have to be saved in another format for viewing on the web.

Basically web pages use three types of images: GIF, JPEG and PNG. A fourth type, SVG, can also be used and is growing in popularity. It is a vector image, while the other three are bitmaps, but it has not yet been widely accepted. Bitmap images are pixel based and are dependent on the resolution the image was created at. Vector images, however, are based on mathematical formulas that define the image. Because of this, vector-based images are often smaller than bitmap images and zooming them in and out does not diminish their quality because the underlying mathematics understands that a circle is still a circle no matter what resolution.

GIF (graphics interchange format) was developed for CompuServe and is an eight-bit format type. This type can compress bitmaps down to half their size without any loss of quality, a so-called lossless format. GIF images may have transparent areas for background textures or images to appear through them. They are best used for images of 256 colours or less.

JPEG (Joint Photographic Experts Group) was developed as an alternative to GIF because it can handle photographs so much better. This image type is 24-bit and supports millions of colours. JPEG, or JPG, is a "lossy" format, meaning that compression takes away from the quality of the image. If you are posting images from your digital camera, it is best to do any editing to the images before you save them as JPG, where they can lose some of their depth and quality.

PNG (portable network graphics) is also a reaction to the drawbacks associated with the GIF format. The biggest drawback to this format is that only the most recent web browsers support it so anyone viewing your website with an older browser will not be able to see these graphics. One of the biggest advantages of PNG format is related to its ability, like GIFs, to have transparent areas. PNG has the ability to have pixels that are partially transparent, allowing an image to have better transparent areas in shaded portions. Unlike GIF, PNG does not allow animation and is considered a single-image format.

SVG (scalable vector graphics) is the most recent of the image formats and is being created by W3C, the international organization that oversees standards for the World Wide Web. SVG images are vector, which allows them to be zoomed in and out without losing any detail. The format can accomplish this while still maintaining a small file size, important when web users are on slow links.

With this brief introduction to website graphics, you should now be able to make some educated choices about the graphic formats to use on your next web page.

The following are some related links: shows a variety of PNG images and how they are shown in different browsers. is the home page for SVG.

The Mousepad runs every two weeks. It's a service of Chebucto Community Net, a community-owned Internet provider. If you have a question about computing, email If we use your question in a column, we'll send you a free mousepad.


The Mousepad Index


Originally published 16 January 2005


Our community is online here!


A feature of the Halifax Herald