JPG / GIF / PNG: What’s the Difference and When to Use Each

A close friend of mine was recently telling me about an experience they had interviewing for a new job as a front-end web developer.  I haven’t interviewed for a job in a while, so I was curious as to the type of questions that came up.  Most of them were what you’d expect, but one question in particular struck my interest.

What’s the difference between JPG, GIF, and PNG – when would you use each and why?”

It occurred to me that, despite having to make this type of decision regularly over the last 15+ years, I never really gave it much thought.  There were always obvious reasons – background transparency, image compression, browser support, etc. – but after thinking about it in some detail I was having a hard time coming up with specifics.

I started doing some research on the topic and, despite reinforcing a lot of what I already knew, I actually learned a few things.  In case anyone else might be interested, I decided I’d blog about the research.  It’s not meant to be all-encompassing, but maybe it will help shed some light on the differences and teach you something perhaps you didn’t know.

JPEG / JPG

JPEG gets its name from the Joint Photographic Experts Group, the name of the committee that wrote the standard.  JPEG supports a wide list of colors, up to 16.7 million to be exact, which serves as one of the primary reasons it’s one of the most used file formats on the web.

Here’s cheat sheet on the JPEG graphic format:

File FormatRaster
CompressionLossy
ColorsSupports up to 16.7 Million Colors
TransparencyNot Supported
File Extensions.jpg, .jpeg, .jpe, .jif, .jfif, .jfi
Maximum Image Size65535 x 65535
Best Suited ForComplex Graphics and Photos

For the complete history and a list of all the standards JPEG encompasses, check out: https://en.wikipedia.org/wiki/JPEG

GIF

GIF stands for Graphics Interchange Format and was created by CompuServer in 1987. Because they support only 256 colors with 8-bit pixels, GIFs are generally best suited for low resolution files.  Support for background transparency and animation made them very popular in the early days of web site creation.   Controversy over the licensing agreement between the software patent holder, Unisys, and CompuServe in 1994 spurred the development of the Portable Network Graphics (PNG) standard (detailed below).

Here’s cheat sheet on the GIF graphic format:

File FormatRaster
CompressionLossless
Colors256 Colors
TransparencySupported
File Extensions.gif
Best Suited ForLogos and Small Images with Solid Colors

For the complete history and technical details on GIF, check out: https://en.wikipedia.org/wiki/GIF

PNG

PNG stands for Portable Network Graphics and was created as an improved, non-patented replacement for GIF.  It was designed specifically for transferring images on the Internet and supports palette-based images, grayscale images, and full-color non-palette-based RGB[A] images.  PNG supports transparency (PNG-24 and PNG-32) but does not support animation.

Here’s cheat sheet on the PNG graphic format:

File FormatRaster
CompressionLossless
ColorsSupports up to 16.7 Million Colors
TransparencySupported in PNG-24 and PNG-32
File Extensions.png
Best Suited ForLogos, Simple Images, or Images with Effects (Drop Shadows, Gradients, etc.)

For the complete history and technical details on PNG, check out: https://en.wikipedia.org/wiki/Portable_Network_Graphics

When to Use Which Format (JPG, GIF, or PNG)

For photographs and large or complex images, JPEG still rules the roost.  It’s high level of compression makes it easier to reduce the file size and distribute across the web.

PNG is becoming the new standard for logos and simple images, but is not supported in IE6 and only partially support in IE7 and 8.  It’s support for transparency (PNG-24 and PNG-32) makes it an ideal candidate for many images, particularly those featuring drop shadows, glows, gradients, and other effects.

There is still some controversy surrounding the patent issue with GIF and so many web designers and developers have moved away from it.  In most cases, PNG-8 is a suitable replacement supporting as many colors as GIF but with higher compression.  However, GIF is the only format of the three to support animation.

I could have spent a lot of time talking about the details of each format, but I figured that was best left to a graphics expert.  Besides, there is a lot of great information on each of the three formats on Wikipedia.  This was meant to be a basic overview to help you make quick decisions.  Hopefully you found it useful!