We help IT Professionals succeed at work.

Best file format for clear images

Tom Knowlton
Tom Knowlton asked
on
145 Views
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


Thanks!!
Comment
Watch Question

Jason ThompsonSenior UX Designer

Commented:
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

Author

Commented:
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
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Tom KnowltonWeb developer

Author

Commented:
That must be why I hear so many designers talk about creating their images in Photoshop first.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

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

OR

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.