Choosing between JPG, GIF and PNG image types
Author: Justin Munro
These three image types are used throughout websites but understanding when to use each image is essential for having fast website load times and crisp graphics. In this post I will not go into how these images types work but instead just concentrate on when to use them.
JPG
JPG (or JPEG) stands for Joint Photographic Experts Group. This graphic type is used for images that contain colours blending into each other, for example a gradient fade using multiple colours or a photographic image. It generally creates files of a larger size than gif but smaller than png images. In graphics packages you can usually reduce the quality of a jpg image by up to 20-30% therefore reducing the image file size and see no difference when used in a browser. The main issue with jpg images is that they do not preserve any transparency.
GIF
GIF stands for Graphics Interchange Format and is generally the smallest file size image type. This graphic type is used for images that contain solid blocks of colour with no blends between colours. Gif files preserve transparency but they have to blend the transparency into a colour. For example, if you have a blue circle on a red background the gif will have to be set to blend in to red. If this graphic is then put on a white background you will see a red outline around the circle.
PNG
PNG stands for Portable Network Graphics and is generally the largest file size image type if set to 24-bit. This means that it should be only used when you can't achieve what you want using the gif or jpg image types. Png image files also do not display correctly in IE6 and therefore additional CSS needs to be added specifically for IE6 to get the png files to display transparency correctly. That said, it does achieve both functions of jpg and gif images. It can be used for images with blends between different colours and also for transparency. The transparency of png images is far superior to gif images because it does not need to blend the transparency into a specific colour. This means it works as you would expect transparency to work by having crisp edges and being consistent regardless of what background it is placed on top of. Generally I only png images when I need to include this type of transparency in a website design.
I hope that helps you to decide which image type to use next time you are preparing a design for a website.