About image formats
Choosing the right file format to save your images in is of vital importance. There are four image formats in constant use on the web — GIF, JPG, PNG and SVG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor. When choosing the format for your image, you should always be conscious of both the image’s quality and filesize.
Compuserve’s 8-bit GIF format has long been the most popular on the Internet, mainly because of its small size. It is ideal for small navigational icons and simple diagrams and illustrations where accuracy is required, or graphics with large blocks of a single colour. The format is loss-less, meaning it does not get blurry or messy. GIFs use a simple technique called LZW compression to reduce the filesizes of images by finding repeated patterns of pixels, but this compression never degrades the image quality.
The 16-bit JPEG format (usually written without the E), was designed with photographs in mind. It is capable of displaying millions of colours at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images. JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage. Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency; but as I said, they really are only for photos. Simple graphics with large blocks of colour should not be saved as JPGs because the edges get all smudgy.
PNG can be used in three different forms - 8-bit, 24-bit or 32-bit colour support. Each one has pros and cons and and should be used accordingly.
- 8-bit - supports 256 colours, index transparency but no animation.
- 24-bit - supports 16.7m colours, alpha transparency but no animation.
- 32-bit - supports 4.2bn colours, alpha transparency but no animation.
PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format. This means that filesizes can be rather big against a comparable JPG. PNG’s main draw are alpha-channels. Instead of the rudimentary transparency options in other formats (where a pixel is either transparent or opaque), an alpha channel can specify the opacity of any pixel from 0–255, where 0 is fully transparent and 255 is fully opaque. This allows you to create a graphic that can be placed on top of any background colour and will retain a translucent effect, with the background showing through the pixels that are not opaque.
SVG is an XML based data file describing an image with vectors rather than pixels. This lends itself to UP SCALING without the loss of quality. An attractive format for charts and info graphics.
Image Types
GIF - Graphic Interchange Format

- Popular Animation Format
- Best suited for flat colour images such as logos and icons
JPEG - Joint Photographic Experts Group

- 'Lossy' compression algorithm (i.e. the heavy the compression the more pixels are lost)
- Best suited for images with alot of tonal gradiation, such as photographs and photo-realistic images
PNG - Portable Network Graphics

- Supports degrees of ALPHA (opacity), so not only can one color be made transparent, but the degree of transparency can be controlled
- May optimize both flat and gradiated colours within the same image
SVG - Scalable Vector Graphic
- Data based XML files, rather than pixel based image
- Scales UP without losing quality