Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

3 Answers 3

up vote 6 down vote accepted
  • 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.

share|improve this answer
    
This is what I was looking for, thanks! –  BenV Oct 28 '10 at 14:42

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)

share|improve this answer
1  
I would add that for UI screenshots/non-photos - use PNG. JPEG tends to horribly pixelate non-photo images. –  scunliffe Oct 29 '10 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.

share|improve this answer
1  
Only IE6 has problems with transparent PNGs. IE7-9 is fine with them. –  bdadam Oct 28 '10 at 8:08
    
IE4 and newer support paletted PNG with transparency: calendar.perfplanet.com/2010/png-that-works/#paletted –  porneL Mar 5 '13 at 23:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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