IMAGES IN WEB PAGES – When to use GIF, JPEG or PNG

There are three image formats widely used in web pages: GIF, JPEG and PNG. You need to choose the right format for your website images so that they will look good and still be a reasonable size.

Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.

Points to remember:
JPEG
Use JPEG to save photographs.
JPEG cannot have transparent backgrounds.
JPEG is not good at preserving exact colors – don’t use them for logos or text.

GIF
Use GIF to save images that have sharp lines (like text) and solid colors.

Examples:
A solid red square
A typical corporate logo
Use GIF to save images that need to have a transparent background.
GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.

PNG
Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
Use PNG if you need to create print ready high-resolution graphics.

THEORY AND COMMENTS

ABOUT JPEG
Having plenty of time to spare because they were unable to get any dates, a bunch a nerd-photographers invented the JPEG – a method of compressing/packaging photographs in a digital format. JPEG is able to compress images by dumping unneeded image information – this makes JPEG a ‘lossy’ image format.

Because of this, with each generation that an image is saved as a JPEG, the quality gets lower since image information is getting lost with each cycle. As the quality of the image drops (information lost), the image starts to look worse and worse.
Don’t get me wrong; JPEG is still a great format for photographic images (widely used in high-end digital cameras like the Canon Digital Rebel,) you just need to know how to use them properly.

ABOUT GIF
GIF was designed for screen graphics in the day when modems were really slow. As such, they are very limited and can only support up to 256 colors.

GIF has a very simple one-color transparency, or as some people would describe it: an ‘on/off’ type of transparency. But, they are small in size and do a great job with images that have sharp lines … as I listed above.

ABOUT PNG
PNG was designed with the web in mind and is (by far) the most flexible graphic format ready for web use. The only problem is, that images saved as PNG always seem to be larger than their GIF or JPEG counter part. As such, most web designers just use GIF or JPEG.

PNG can do nifty things like contain gamma-correction information that automatically corrects the brightness of an image in different operating systems.

PNG has that smooth transparency I mentioned – graphic designers would recognize this as a 16 bit alpha channel. What that means, is that every pixel in a PNG can be semi-opaque to whatever degree you want.

PNG images come out larger because graphic design programs (Photoshop, Corel Photo Paint et cetera) are actually doing a bad job in creating PNG images. Maybe one day, they will get their act together and we can then all take advantage of PNG