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.
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!
There are two major benefits of using PNG images.
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.
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.
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.
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.
If you have a photo (e.g. a product photo) with the background removed, then you have two options:
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.
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.