« Tour of Grays Harbor Paper Mill | Main | Desktop Backgrounds »
Friday
Oct222010

Web Graphics: GIF vs. JPG vs. PNG

I can't count how many times I've looked at a website and come across a graphic or photo that was saved incorrectly, resulting in bad quality. I've had clients request images for their websites often, and I always try to give advice as to what file format is the best. I've tried to explain why, but I've never found a good article online, so I thought I'd create my own guide to point clients to. First a summary on when to use each type of graphic.

GIF
A GIF is an image with a maximum of 256 colors. It is best used for solid color graphics such as logos or text. A photo should never ever be a GIF. Also, GIFs allow for transparency and nice sharp edges on solid colors. GIFs can also be animated to create an easy web banner without flash knowledge (but animation should be used very cautiously!)

JPG
A JPG is what we most commonly know as a photo format. If a JPG is used for something with solid colors (like a logo), you often get some degradation in the solid colors because the JPG tries to add in extra colors when they are not needed. Also, JPGs do not allow for any transparency or animation.

PNG
PNGs are relatively new to the web scene, but in my opinion they are somewhat "the best of both worlds". They allow for nice sharp solid colors, and great photo quality. And a bonus, they allow for transparency.

Now its time for some comparison images to really show you what I'm talking about.

Logos

From left to right, we have a GIF, JPG and PNG. The GIF and PNG are both nice and crisp, with a transparent background. The JPG is fuzzy with a white background. The right choice here: GIF or PNG.

 

Gradients

 

 

 

 

 Again, from left to right, we have a GIF, JPG and PNG. This time, the JPG and PNG look nice and smooth, and the GIF is full of dots and lines. Also, the PNG allows for the gradient to be transparent (but can also have a white background if needed). The right choice here: JPG or PNG.

 

Photos

Again, from left to right, we have a GIF, JPG and PNG. Just like in the gradient example, the GIF is full of dots. The JPG and PNG look great here though. If for some reason the cow was on a white background, he could also be floating in the PNG version. The right choice here: JPG or PNG.

 

So I hope this gives a clear idea as to when to use what format. When in doubt, try it out and save your graphic in all three formats to compare and choose the best.

References (3)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Call Me Amy Design - Seattle Freelance Graphic Design for Print & Web - Web Graphics: GIF vs. JPG vs. PNG
  • Response
    Call Me Amy Design - Seattle Freelance Graphic Design for Print
  • Response
    So, according to you there is much difficulty that people face due to the logo or deisgn files on every website but i say that it is something good for a security purpose not to keep every file type the same.

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>