Website Image Formats: Choosing the right format for the right task.

Question

When designing a website, what do you consider the best image format to use for a particular task?

I always find myself in a dilemma when trying to figure out what format to use for a specific task...like for example, should I use .jpg all round? or, when and why should I use a .png?

For example, taking Amazon's website, they use .jpg for product images (Example), .gif for this transparent pixel (Example) and .png for their CSS Sprites (Example)

On the other hand, Play.com use a .gif for their website logo (Example), but use .jpg for their website products (like Amazon) (Example) and as far as their main page goes, they dont have any .pngs on it.

So what formats should I use for my websites? and why should I use them?

[UPDATE]

Thanks CruellO for this link for explaining the differences, and also Dustin for giving reasons on what to use.

Answer 1

Try to look at this site http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

They try to explain what to use when

Answer 2

PNG should be used when:

• You need transparency (either 1-bit or alpha transparency)
• Lossless compression will work well (such as for a chart or logo, or computer generated image)

JPEG should be used when:

• Lossless compression will not work well (such as a photograph)
• Full color is needed

GIF should be when:

• PNG is not available, such as on very old software or browsers
• Animation is necessary

Despite myths to the contrary, PNG outperforms GIF in most aspects. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and alpha transparency, but this is where you may run into problems on the web. Alpha transparency has compatibility issues with IE6 that are well documented (though hacks exist to get around).

PNG modes include (this is just a small subset)

• Palette colour of 2 to 256 colors (like GIF)
• Palette colour of 2 to 256 colors, with transparent color (like GIF)
• True color (24 bit color)
• True color with alpha channel (24 bit color + 8 bit alpha transparency)

For best compression in PNG for the web, always use a palette mode. If you find PNG files are larger than the equivalent GIF files, then you're saving the PNG in 24 bit color and the GIF in palette mode (because a GIF is always in palette mode). Try converting to palette mode first.

If you find that your PNG files with transparency aren't working properly in IE6 while your GIF files are, then you are using 24 bit color + alpha transparency in PNG and palette mode with a transparent color with GIF. You will have to make sure that you convert your PNG into a paletted color mode with a transparent color.

PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this cannot be used in Photoshop.