When to Use JPGs, PNGs and GIFs on the Web

Each filetype has its own place on the web. See where they fit in.

The other day my boss asked me to send a graphic. I sent a PNG, but was informed it needed to be a JPG. That seemed an appropriate opportunity to utter my generation's mantra -- Why? Like many conversations that begin with, I need this filetype instead of that, I found it wasn't really a need.

Regardless, it led me do some research on the difference between a PNG and JPG. For sport, I added GIF files into the mix, because ... well, why not?

Let's step through some use cases to show which filetype is be best.


Type: JPG


JPG is generally the best file type for digital photography, especially on the web. To understand this, you have to understand the difference between lossy and lossless file compression.

A JPG is a lossy compression of your photographic image, while a PNG provides lossless compression. The biggest difference between lossy and lossless compression is the output. A lossy compression uses an algorithm to very slightly alter each individual pixel so that color is repeatable and file size can be compressed. A lossless compression reduces file size for transmission, but will put everything back together. So, in general, a lossy compression results in a smaller file size and permanently alters the original file.

This makes JPGs ideal for photographic images, especially for the web, as they can compress photos to much smaller file sizes than PNGs without too much noticeable difference in quality.


The one exception to this guideline would be if you need any transparency in your photo. In you want to preserve transparency, you'll want a PNG.

Graphic Artwork

Type: PNG


If you're storing and using locally or using in other artwork programs, you should (obviously) store these file types as their original (vector) art files, be it AI, EPS, PSD, and so on. The advantage to using PNG or JPG for graphic artwork on the web is that, by using lossless compression, the PNG is better able to maintain the sharp edges on lines.

Web Icons

I'd use PNG only to create complex artwork files you couldn't have otherwise created with CSS. Today, CSS is capable of enabling you to create many web elements. And you can't beat CSS for crisp, clear images. Therefore, things like buttons and gradient backgrounds should never be created with an artwork program, but should be created using CSS.

An even better alternative to this is to consider SVG files, which will maintain their vector form even on the web, although their support is more limited.


Type: GIF

GIF really isn't useful for anything today other than animations. If you're using it for anything else, you're doing something wrong. Really the only practical use, other than animations, is transparency in older browsers. At this point, that means IE6 and earlier. And if you're still supporting IE6, we need to be having a different discussion.


Let's Connect

Keep Reading


A brief description of CSS, before suggesting a couple free courses.

Jun 25, 2020

How to Use Netlify Forms in a Gatsby Project

Netlify form handling is an extremely powerful feature that enables you to collect dynamic data from your users on your static sites. But it's a little tricky to get it working right within a Gatsby project. Here's a detailed look at a couple different ways of approaching Netlify forms for a Gatsby site.

May 06, 2019

WTF is the DOM?

A brief introduction to the DOM with a quick example on manipulating it, and a link to digging in deeper.

Jul 28, 2020