GIF vs JPG vs PNG – Which Image Format Should You Use?

So, you’re building your first website, and you need some pictures for it. You do some research, somebody says “JPG,” and another says something about “PNG.” You do know what a GIF is, because it’s the one that moves, but you’re not entirely sure what all these file extensions mean or why it matters to your website. What’s the real difference?!

Getting into web design introduces a whole new world of factors to consider when choosing the right image format for the job at hand. For one, there’s the file size. It determines how much space is taken up on the hosting server, how long the picture takes to load, and how much data transfer is used up on the visitor’s data plan.

Then there’s also quality to consider. Do you want to use a “lossy” format, which sacrifices some of the original picture’s details for a smaller file size? Or how about a “lossless” format, which has peerless quality, but comes with drawbacks of its own? What about pictures with transparent backgrounds?

If those questions are on your mind, we’ve got answers for you. I personally dug through the technical aspects of each format so you don’t have to. Read on for all the details, or hop on down to the bottom, where I’ve included a little cheat sheet.

GIF (Graphics Interchange Format) – for the Dancing Babies

Ah, the GIF. It has brought us adorable cats, dancing babies, and extra shiny buttons that sparkled and gleamed.

You could think of animated GIFs as precursors to the complex, animated UIs we have now. They inspired Flash sites, which were then replaced by the advanced JavaScript animations we see today. Those dancing babies allowed many people to see the internet’s potential, strange as it is to say.

The actual format was developed in 1987, and it’s rather simple. You get 256 colors per image, chosen from the RGB (Red, Green, and Blue) spectrum. If you have an animated GIF, then each frame gets to have its own palette. This system helps keep files sizes down… relatively speaking. Long animated GIFs at large resolutions can easily run into the hundreds of megabytes, which can hurt a bit if you’re on a capped data plan.

The limitations of this format also mean that it’s not well suited for displaying photographs. The color limitations mean that 256 hues and shades have to do the job normally done by the 16 million colors in the RGB spectrum. Here’s an example:

This is a donkey I took a photo of in October 2017:

I call him Gary, and he was pretty chill about the whole thing. Great model. Anyway, that was actually a high-quality JPG image. Here’s the same picture, but in GIF format:

See how it almost looks like a watercolor? Now, this is perfectly okay for animations — people aren’t supposed to look at the fine detail of each frame. They’re supposed to enjoy the action.

When building a website, I generally wouldn’t use GIFs as a part of the actual UI… the animated backgrounds of years past haunt us all. Anyway, GIFs are best used as content. Throw one into the middle of your blog post to drive a point home, or lighten the mood.

JPG (Joint Photographic Experts Group) – for Friendly Donkeys, and Other High-Detail Images

Ever since the JPG format was released in 1992, it’s been a staple of online imagery, consumer-grade photography, and any other use case that requires a significant amount of detail in a small file size. The JPG has been dominant for a long time because it gives you exactly that: lots of detail, relatively small file sizes.

Of the formats on this list, JPG is the best option for photos with lots of color and detail. It’s also quite flexible because you can export JPG images at varying degrees of quality, which allows you to decide exactly how much quality you’re willing to trade for smaller file sizes.

Let’s take another look at our good old friend, Gary. Here he is in a JPG image with the quality set to 100 (the highest value). The image “weighs” 633 kilobytes.

And now, let’s set the image quality to 80. If you look closely, detail has definitely been lost, but not that much. And even with this minimal loss of detail, the image’s size has been reduced to 121 kilobytes.

At a quality level of 50, the image starts to show much more serious image compression. However, the diminishing returns in terms of file size are notable. We’ve lost only 41 kilobytes, bringing us down to 80 in total.

And at a quality level of 30, it’s just not worth it. 65.4 kilobytes.

So, you generally want to keep the image quality value around 80, and it’s usually not worth going lower than 70 at all. Go too low, and you end up losing a lot of detail, with not a lot to show for it in terms of reduced file size.

You should keep in mind that JPG’s built-in compression tends not to play nice with images that need smooth, crisp lines, like images with text on a solid background, or logos. To show you what I mean, I’d like to present this very simple graphic:

I set the quality to 70 to make it easier to show you what I mean. If you look closely at the image, you should see that the edges around the text and that blue shape are blurred. Here’s a zoomed-in version:

So where does JPG fit in on a website? Photos, plain and simple. Want a big background photo for the website? JPG. Photos of your products on display? JPG. Shots from your yearly camping trip? You see where I’m going with this.

PNG (Portable Network Graphics) – Mostly for Logos and Icons

And that brings us to PNG. The way it works is actually somewhat similar to the way the GIF format works. In fact, the old PNG-8 variant is limited to 256 colors, but people hardly use that anymore.

The format we most typically use is called PNG-24, and it supports up to 16 million colors, meaning that it acts as a lossless format. No detail is lost. Ever.

There is built-in file compression. While JPG compresses images by sort of blurring pixels together, PNG doesn’t do that. That means it’s fantastic for images where you want crisp lines. Have a look at the PNG version of my very simple graphic from earlier:

And the zoomed-in version:

The PNG version of the simple graphic is about ten kilobytes larger than the JPG version, but that’s a negligible difference for an impressive increase in quality. However, this is true only for the most minimalist of images, with solid colors and simple shapes.

That photo of Gary, the pretty chill donkey? Its PNG version weighs in at 2.32 megabytes, which is huge for an image of those dimensions. I haven’t included it here because I respect any bandwidth or data cap limitations you may have.

As a bonus, PNG supports transparency, which means you can take a PNG image with no background, and overlay it on any kind of background you like.

The thing is, PNG was hardly the first image format to support this feature; GIF images can do it, too. PNG, however, does it better. For this comparison, I took the terrible graphic, removed the white background, and saved the image in both PNG and GIF formats. I then placed those images on another, darker background to show you how each format handles transparency:

As you can see, the transparency provided by the GIF format leaves the shapes with rather jagged edges. PNG wins, here.

On websites, PNG is typically used for things like logos, icons, and generally very simple graphics. They’re also used for ads, and sometimes for very small “thumbnail”-sized images, where the extra detail of a lossless format is appreciated.

Bringing It All Together

There’s a lot to know about these image formats. Each has its own history and way of doing things. The information in this article barely scratches the surface, and each format on its own could easily fill a book or three. But for getting your website up and running, it’s probably best to keep things simple.

Speaking of keeping things simple, here’s that cheat sheet I mentioned earlier:

Finally, these are long-established image formats, so they’re pretty simple to use: Just upload them to your website, and go. It would be very, very hard to find website builders (like Wix or GoDaddy) or web hosts that don’t support all three.

The three formats are also supported across all major browsers (Chrome, Firefox, Edge, Safari) and the vast majority of less well-known browsers. Follow the general advice in the article, and you’ll be fine…

…until WebP replaces JPG, GIF, and perhaps even PNG. But that’s a whole different article, so don’t get me started.