The easiest way to speed up your website is to fix this mistake.

What is the difference between PNG and JPG?

If you don’t know the answer to this question, then you may be using them interchangeably. The reality is that each has its own purpose, and you need to use the correct one in the appropriate situation.

Why using the wrong one screws up your speed.

When you use a PNG for something like a photograph — it will be a huge image file, weighing around 5–10 times more than the JPG version.

For example, the following image (1650px by 1000px) saved as a JPG weighs only 190KB. But if we save it as a PNG, it weighs a whopping 1.8MB! That’s almost 10 times more.

So should you always use JPG? No!

When to use PNG?

There are two major benefits of using PNG images.

1. They have transparency.

So you can use a PNG image without a background. It will overlay perfectly on whatever background is currently on your site.
JPG images do not have transparency! If you have a JPG of a product that has had the background removed, it will actually be on a white background — not a transparent one.

2. They look sharper when used for computer graphics.

Computer graphics or vector images are drawn with a computer, things like logos, icons, and images of text. They are not photographs. They often only have one or two colors in the whole image, and strong separations between those colors.

When to use JPG?

You should use JPG in all other cases. As in, when you don’t need transparency, and the image is a photograph, not an icon or logo.

Use JPG for photographs.

Photographs have thousands if not millions of shades of colors and very little separation between them. This is a lot of data and if you save it as a PNG this will be a huge file, weighing 5 times more than the same file as a JPG.

But there’s an exception.

If you have a photo (e.g. a product photo) with the background removed, then you have two options:

1. If the photo is going to be used on a solid background e.g. a white background or blue, then just save it as a JPG with that background color added in.
2. If the photo is going to be used somewhere where the background isn’t solid, maybe on top of another image, on top of a pattern, or simply crossing some border or section of your website, then you need to use a PNG.

Just be aware of the trade-off. If you need a photo with a transparent background, and using a PNG will slow down your site, and you are prioritizing design over loading speed.

Need to convert your images?

If you need to convert a PNG image to a JPG I recommend using Squoosh.app. I’m not affiliated with them, it’s just what I use.