GIF, JPG and PNG File Formats: Pros and Cons

GIF: Graphics Interchange Format

PROS
- 256 number of colors
- uses lossless compression
- suitable for logos, flat areas of color with well defined regions
- suitable for icons with few colors
- support for transparency
- suitable for small animations

CONS
- the oldest format for web – 1989
- in most cases it has a bigger file size than PNG

PNG: Portable Network Graphics

PROS
- 24bit color / 8bit color(256 colors)
- uses lossless compression
- suitable for flat areas of colors, logos, transparent or semitransparent images
- suitable for icons
- in most cases PNG has a smaller file size than GIF
- it has alpha channel transparency which is more advance than GIF’s transparency
- approved as standard in 1996
- proposed as replacement of GIF by World Wide Web Consortium

CONS
- it is wise to avoid using PNG with big photos and images with details because of the big generated file size
- in different situations it has bigger file sizes than JPG

JPG: Joint Photographic Experts Group

PROS
- 24bit color
- suitable for images, high details & quality pictures
- uses lossy compression
- it is the most used graphic file format
- approved as standard in 1994
- used in design and photography industry – it is likely to see nature photos in JPG file format
- it is good when you are willing to drop quality from a picture for the sake of file size

CONS
- it does not support transparency
- it is not suitable for logos and icons because it does not have transparency and it can generate a bigger file size for small resolution images.

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends