The Difference Between GIFS, PNGS and JPGS

The Difference Between GIFS, PNGS and JPGS

Which file extension is best for you?

If your reading this article, then you’ve probably heard of the picture formats GIF, PNG, and JPG. All of these formats have their own pros and cons, and this article will try to help you understand them so that you can better use them in your day to day life.

The JPG Extension

JPG (pronounced Jay-peg), is one of the most common formats out there. A default on most digital cameras, and used commonly for things like desktop backgrounds.

Pros

  • First in Compression, although at the price of quality.
  • Supports True Colour

Cons

  • Artifact. The more you save a JPG picture, the more artifacts it gets.
  • Doesn’t support transparency. (click here to see the Wikipedia page on transparency (graphic))
  • Doesn’t support multiple layers.

Conclusion

JPG is in my opinion the least useful of all the extensions. I do not use it for anything, except for my digital camera pictures which are JPG by default.

The GIF Extension

GIF (Graphics Interchange Format) is the second smallest compression format.

Pros

  • Second in Compression
  • Supports Binary Transparency:                                                                   
  • The GIF circle has sharp jagged edges, while the PNG circle has smooth edges because it supports Partial Transparency.
  • Supports Multiple layers as animation. (Click here to see a short GIF animation from Wikipedia)
  • No Artifacts

Cons

  • Usually only supports256 Colour Palettes. (In the GIF image above, notice how you can distinctly see the difference in the dark blue changing to light blue, you can’t in the PNG because PNG supports True Colour)

Conclusion

I use GIF only for animations, because that is the best feature about this file. This format is rarely used for pictures because it only supports 256 Colours, and most picture need True Colour.

The PNG Extension

PNG (Portable Network Graphics, pronounced Ping) is the newest format on the block, though it is quickly being picked up by web designers everywhere.

Pros

  • Third in Compression
  • Supports Partial Transparency
  • Supports True Colour (click here to read the Wikipedia page on True Colour)
  • No Artifacts

Cons

  • Doesn’t support Layers

Conclusion

This is the best file format. I personally save all my pictures in this format. It has all the features of the other extension except animation.

Final Conclusion

PNG! Great for websites, personal use, and advanced design! Sadly most people still use JPG, although PNG is by far the best!

If you can, comment on your favourite extension and why you use it.

11
Liked it

15 Comments

Anon, posted this comment on Jul 19th, 2009

From the creators of PNG: Their is work being done on MNG, which I gather is a animated ping. Not sure about layers.

n00b, posted this comment on Jul 20th, 2009

You are wrong about GIF only supporting 256 colours:

http://phil.ipal.org/tc.html

BenJammin14, posted this comment on Jul 20th, 2009

great article! thanks for sharing

Jacob Dean, posted this comment on Jul 20th, 2009

you hit the nail on the head with this article. I use PNGs for everything as well.

Jose Monaca, posted this comment on Jul 20th, 2009

I use PNG all of the time! Great article.

Nikita K, posted this comment on Jul 20th, 2009

I LOVE this article! I am a self-confessed tech-geek and forever, I’ve wondered about image types and this one probably solves it all for me. Seriously, I can’t begin to tell you how much I love this article!!!
I normally use *.jpg files because that’s the norm for uploading photos in most places.
*.png has never stayed on the top of my head because it is very advanced and some uploading places don’t allow *.png but it has been quite helpful when I save any Adobe Photoshop files.
As for *.gif , I don’t really do animations and the quality isn’t my favourite either.
Seriously a good read. Well done!

Babyface Jam, posted this comment on Jul 20th, 2009

Wow. I had no idea what these were before now! Good job!

simplyoj, posted this comment on Jul 20th, 2009

thanks for sharing this.. good comparative analysis..

ur guide, posted this comment on Jul 20th, 2009

great information! thanks for sharing. will keep this thing in mind while dealing with pics next time.

Bozsi Rose, posted this comment on Jul 20th, 2009

I used to use PNGs for a lot of video work. Good job!

Willvasco, posted this comment on Jul 20th, 2009

i have no idea what the heck ur talking about lol

Dreyan, posted this comment on Jul 20th, 2009

I was wondering what the differences were, but as for your claim that GUFs don’t have artifacts, I have one that I use as an avatar on a different site, and when I exported as a GIF a few black dots appeared.

Also, some programs allow you to set the compression ratio when you save certain formats.

ScarTissue, posted this comment on Jul 21st, 2009

Thanks for the comments everyone!
Sorry n00b, you’re right, a GIF can support more colours. I’ve edited the article and it is pending change.

Jane Jane, posted this comment on Nov 18th, 2009

I usually have JPG because as you have said it’s the default on almost everywhere. Like in school we have JPG all the time.

Franklin, posted this comment on Nov 29th, 2009

Most of the time I use JPEG for static photos… My raw file in designing is PSD.. GIF sometimes… Okay, I’ll try to research more on PNG… I barely use it… Thanks for giving this idea selflessly.. :D

Leave a Response