We help IT Professionals succeed at work.

Best file format for clear images

Tom Knowlton
Tom Knowlton asked
Last Modified: 2012-06-10
I have some glossy "Web 2.0" style buttons I am creating.  The program is asking which format to save the files in.

Um, I don't know which is best.

Need some education on GIF vs JPG vs BMP

Advantages / Disadvantages of each

Intended use (on the web) for each file type

Watch Question

Jason ThompsonSenior UX Designer

Here's a quick summary for those not well versed in image formats;
  • BMP a non-lossy (no compression) format which is good for high-resolution images where you want to maintain image quality, but it's not intended for web use and not viewable in a browser.  TIFF is similar format but more widely used.
  • GIF images are readable in all web browsers, are fairly small in file size and allow for transparent backgrounds, but limited 256 colors.  This is good for logos and other image where not a lot of color variety is used, and you want to maintain image quality.
  • JPGs (or JPEGs) are also readable in all browsers and were originally designed for photo compression.  The use millions of colors, and you can set the amount of compression you use to shrink file size.  The catch is; the more compression, the worse the image looks.  Also, JPGs don't use background transparency.
If you have the option, PNG is becoming a popular format for the web.  While not viewable in older web browsers without some special coding, PNGs offer some image compression without quality loss, millions of colors (with PNG-24), and transparent backgrounds so you can put the button on top of any background color.

Here's a good comparison between PNG graphics, GIFs and JPGs.

If you're generating buttons and don't have a PNG option, GIF might be ideal so you don't get any JPG compression remnants.

I hope this helps.
Tom KnowltonWeb developer


I've noticed that when I use JPG's --  when I save them, for example, what used to be white areas of the image, when I open the JPG again, those areas have sprinklings of other colors.

Is there a way to prevent this?

It is done so that text and images bleng together, right?  The colors are used to "trick the eyes" and make jagged edges look smoother?

I've also heard of "vectored" file formats?
Senior UX Designer
Unlock this solution and get a sample of our free trial.
(No credit card required)
Tom KnowltonWeb developer


That must be why I hear so many designers talk about creating their images in Photoshop first.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.