Graphics on the Web

Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is when should I use GIF and when should I use JPEG? GIF – Graphic Interchange Format. Use GIF format with graphics that you have created on your computer such as horizontal rules, buttons, or animation. GIF files can contain the maximum of 256 colours (8 bit) or less, which is good for customising your graphic files. For example, if you create a GIF image of a red arrow, you can customise the file to have only two colours, red and white. This means that the file is very small because its palette contains only two colours. GIF file will yield a higher quality and smaller size image, compared to JPEG, when it is used with computer generated graphics such as icons, logos, buttons, etc. GIF’s also have some special features such as animation, transparency, and interlacing.

Examples of GIF’s

Common File Types JPEG - Joint Photographic Experts Group. Use JPEG format when the images are scanned pictures or photographs. JPEG was built to contain 24-bit (16.7+ million colours) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of colour changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low colour level and details like computer generated graphics.

JPEG Example’s

Common File Types PNG - Portable Network Graphics PNG (pronounced ping) was developed as a replacement for the GIF standard due to legal entanglements resulting from GIF's use of the patented LZW compression scheme (this is no longer an issue), and also because of GIF's many limitations. PNG is superior to GIF in many ways, offering the following features: Images that are the same size or slightly smaller than their GIF counterparts, while keeping lossless compression Support for indexed colors, gray-scale, and RGB (millions of colors) Support for 2-D progressive rendering, which is based on pixels rather than lines (as in interlaced GIF’s and progressive JPEGs); this means that contents of a progressively rendered PNG file become apparent earlier in the load process An alpha channel which allows an image to have multiple levels of opacity; this feature lets you create transparent images just like with GIF’s, and also images with degrees of translucency, better blending images with their backgrounds Gamma correction, which essentially is cross-monitor and cross-platform brightness control File integrity checks which help prevent problems while downloading or transferring PNG files

PNG Example

File Size and Quality The image on the left is a GIF and is 26 KB in size, however the quality of the image is poor. The image on the right is the same image, but saved as a JPEG. The file size on this one is 53.1 KB, however the quality is much better.

File Size and Quality The image on the left is PNG8 (8 bit) and is 291 KB in size. The image on the right is PNG 24 (24 bit), is in 769 KB size however the quality of the colour is better. Should I use PNG8 or PNG24? 8 bit PNG’s use an indexed colour palette like GIF. If you want variable transparency, use 32 bit PNG’s (24 bit colour, 8 bit alpha). If you don’t care about transparency, use 24 bit PNG’s. If you have areas of solid, even colours, then you may be able to get away with an 8 bit PNG, but you will likely need 24 bit PNG for reasonable colour reproduction. 8 bit PNG’s (or less) are optimal for size. 24 bit PNG’s (or 48 bit PNG’s) are optimal for colour reproduction.

Useful Links More information on file types can be found at: