JPEG, PNG, and GIF: What’s the Difference?

We see it all the time–images on the web that are saved in the wrong file formats. Unfortunately, this often worsens the visitor’s experience due to unnecessary compression artifacts in graphics, graininess and reduced colors in photographs, and overall larger than necessary file sizes that place an unneeded burden on browsers, servers, and bandwidth. But it doesn’t need to be this way.

With all of the weird little acronyms (JPEG, PNG, and GIF), it can be tricky for the neophyte to get things right. Fortunately, a little bit of knowledge can go a long way.

Two Basic Types of Images

To understand which format to save your image as, you must first understand what type of image you are working with. Most images can be classified into one of two categories: photographs and graphics. Photographs are images that have lots (often millions) of colors while graphics have relatively few colors. These two basic types of images are best served by two types of file formats.

If You Have a Photograph…

…or any image that has a lot of colors, you should save it in JPEG format.

JPEG is ideal for photographs and is the format that most digital cameras and phones save their photographs in. It uses a form of compression (“lossy“) that produces smaller images by reducing the image quality.

While JPEG compression is usually difficult to notice in complex photographs, the artifacts that are caused by this type of compression stand out in simpler images with fewer colors and more crisp details (e.g. most logos or line drawings).

If You Have a Graphic…

…or any image that has few colors, you should save it in PNG format.

PNG is the yin to JPEG’s yang. It uses a form of compression (“lossless“) that does not compromise the integrity of the image to make it smaller. PNG excells at graphics because it discards information about colors that are not found in the image–and since most graphics have relatively few colors compared to photographs, this approach produces a smaller file. However, if you were to save a photograph in PNG format, it will likely be much larger than if properly saved as a JPEG.

What About GIF?

Generally speaking, the GIF format is very similar to the PNG format and should be used for graphics and not photographs. However, PNG was created specifically to improve upon GIF and replace it, so PNG should be used instead of GIF.

Photograph = JPEG, Graphic = PNG

Just remember photograph = JPEG and graphic = PNG and you should be all set.