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.
JPEGs are for photos. I see JPEGs with text in them occasionally and they just look awful. Text is best for text, otherwise use PNG.
If it’s not a photo, but you want a graphic of it, use a PNG. A PNG is almost always smaller than the equivalent gif and will not lose quality like a JPEG file. A PNG equivalent of a JPEG will typically be a lot larger (assuming it’s photorealistic). There may be times where this is still desirable.
PNG does allow for 8-bits of transparency, but if you have to support IE, you’ll find that they continually refuse to support that correctly. They do support a single bit of transparency in an 8-bit image (essentially the same as gif) as far as I know. There are also numerous hacks to get 8-bit transparency to work in IE. I’ve never bothered, myself.
In summary: