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

user_44084 0
Viewed 51914

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.

image-formats
5 Answers

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:

  • Photos → jpg
  • !Photos → png
Dustin_399750

PNG can be used when:

  • You need transparency (either 1-bit or alpha transparency)
  • Lossless compression will work well (such as a flat-style icon or logo)

JPEG can be used when:

  • Lossless compression will not work well (such as a photograph)

GIF can be used when:

  • Animation is necessary, and video is not possible (though you should really try and use video; animated GIFs are poor quality and very inefficient)

Despite myths to the contrary, PNG outperforms GIF in all like for like comparisons. 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 multi-bit transparency (alpha transparency). Note that multi-bit transparency used to be a problem back when people used IE6.

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 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 chances are you're saving the PNG in 24 bit color and the GIF in palette mode (because saving a full color GIF always requires translation to palette mode). Try converting the image to palette mode before saving in both cases.

PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this work in browsers but software like Photoshop have (or once had) problems with creating or working with them due to not supporting those image modes.

user_532120
Related