Web Images: What is the difference between JPEG and PNG?

There are two types of images that are commonly used on the web: JPEG and PNG. While each format has its strengths, these two are typically used on the web because they can provide small file sizes that will load quickly when someone is visiting your website. Here is a quick overview of the two file types.

JPEG

JPEGs allow you to compress large image files down to small sizes. They are ideally used for photographs, complex illustrations, or images with gradients. This format compresses the image, but does not limit the number of colours in the image.

Every time a JPEG is compressed, some of the image information is lost. This means that if you compress the image extensively to make the file really small, you can create a visible loss of quality. Below are examples of a normal JPEG and a highly compressed JPEG.

When comparing the original JPEG on the left to the one right, you can visibly see the one on the right has been compressed too much as it is distorted.

PNG

PNG files compress images to create a smaller file, but do so by limiting the number of colours in the file. This format is ideal when you need to reduce images that have fewer colours overall, such as logos, line drawings, or icons. PNG files can also improve text readability in images.

One of the best features of PNG files is that they can have transparent backgrounds. To demonstrate this, let’s take a look at the example below:

Here is the same image formatted as a JPEG (on the left) and a PNG (on the right). The PNG image does not have a background colour because the format doesn’t require one, like a JPEG does.

Choosing the right file format for the right images to create smaller files sizes will ensure they load quickly on your website, while keeping your web graphics looking professional.

Want to learn more about the JPEG file format? Check out the article Why Can’t You Just Use My JPEG.