I'm working on a website which will use images in several different applications, from action buttons to avatars to larger detail images. What factors should I take into consideration to decide whether these images should be jpgs, gifs, or pngs?

3 Answers 3

  • JPG for photos or high color differences
  • PNG for images with gradual transparency (fade from 1 color to clear)
  • GIF for images with small color palettes

Obviously give each image a try and see what comes out to the smallest file size. The smaller the size the better. Also don't worry about transparency in IE6 for your PNG's, grandma isn't as concerned how your site looks just that she can see pictures of you on it.


File size. The smaller the file size the faster it will download for your users. So go for the smallest file size that doesn't affect your image quality.

(Generally speaking JPGs are used for photographs and PNGs/GIFs are used for icon-like images)

  • 1
    I would add that for UI screenshots/non-photos - use PNG. JPEG tends to horribly pixelate non-photo images.
    – scunliffe
    Oct 29, 2010 at 15:34

Browser Support. I think it's IE6 or IE7 and older do not support png based images with a transparent background properly. It usually adds some funky background color.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.