GIF - Graphics Interchange Format

• allows up to 256 colours


• can be animated


• features transparencies


• uses a lossless compression (no loss in image quality)

GIF graphics have a 256 color restrictions making it ideal for simple graphics and texts that don't require a lot of colours. Cartoons, logos, charts, and texts all work very well as GIF formats. Photo's don't. Simply put, the fewer colours you use, the more efficient GIF files are.

Here are some examples of good uses and poor uses of GIF files:

Good:

Bad:

JPG - Joint Photographic Experts Group (a.k.a. JPEG)

• supports true colours (16 million colours)
  
• allows variable compression (i.e. it has a "quality" setting with most graphic softwares)
  
• suffers generational degradation if edited and saved multiple times
  
• uses a lossy compression (image quality is lost reduced at higher compression)
  

JPGs is a great format for displaying high quality images, at small file sizes. It is most suitable when displaying images with many colours such as photographs, gradients and scanned artwork. These files tend to look poor on images that uses few colours when saved at a higher compression (see example below). Since JPG uses a lossy compression, unnecessary data are discarded during the compression process and changes are irreversible.

Good:

Bad:

PNG - Portable Network Graphics

• allows 8, 24, or 32 byte storage (256 colours, true colours, or true coloursl+alpha transparencies respectively)


• transparencies not supported by IE6 and file type not supported in older browsers


• lossless or lossy compression


• can be suitable for editing

Designed as GIF's successsor, PNG's meet the best of both worlds. Like GIFs, it supports transparencies, while similar to JPGs, it allows images to display in true color. Because PNG's can be lossy or lossless, it is not only suitable for display and distribution but is also great for editing. The only downside is that PNG's have poor support in older browsers.

Good:

Conclusion

As a final note, most image editing softwares have a feature that allows you to compare different image settings and preview these images when exporting (e.g. File > Export Preview / File > Save for Web). This is an excellent way to find the optimal setting for your images. As a general rule of thumb, set the compression to where the decrease in quality is invisible to the naked eye (for
about 20% of the original file size or less!)

Hope you enjoyed this tutorial and feel free to leave any questions or comments.