Have you ever wondered whether you should save an image as jpeg or png? It seems to be a common question, so I'm going to try and answer it as quickly and simply as I can, without going into details about how jpegs and pngs work.
So, let's start with a photo.
Photo by Ryan Carpenter on Unsplash Now, if we focus on just one part of the image at the original size, and export it as a jpeg, and as a png, this is what both images look like.
As we can see in this side-by-side comparison, there are no noticeable visual differences. So why bother with jpeg or png?
File size
Well, a big reason to bother with jpeg or png is file size. This is especially an important aspect if you want to publish images on the web, as images with a smaller file size will load faster.
Exporting the original image as a png results in a file size of about 4.1MB, versus a slightly more manageable 2.3MB when exported as jpeg.
In this example, exporting as jpeg results in a file size that's just over half of the same image saved as a png.
Compression
If we go further and compress both the jpeg and png using a tool like tinypng, we see that the jpeg was compressed by 86%, and the png by 78%. This results in a very reasonable 323.3KB jpeg, and a 924.9KB png. So in this example, the compressed jpeg file size is only 35% that of the png.
Now you'd think that the image saved as a png would be higher quality because of it's heavier file size, but that's really not the case when looking at the compressed jpeg and png side by side.
On the compressed png, we can see many artifacts below the flowers, where it struggled with the gradient of colors during compression. On the other hand, the jpeg didn't lose any noticeable picture quality despite having an 86% smaller file size than before.
So to conclude, it's usually safe and a better option to export photos with many different colors and gradients as a jpeg, as they will generally have a smaller file size and are much easier to compress without losing much quality.
Now let's try a different type of image...
We've tried it with a photo with lots of colors, but will the results be the same with an image with only a few flat colors?
I purposely chose an image with clashing colors (blue and red) as an example to more easily demonstrate this point. Let's try the same process. Exporting this image as a png and as a jpeg and comparing the two side by side:
Okay, so far so good. Like the previous example, they look virtually identical. There isn't one that is of noticeably higher quality than the other.
File size
Now this is where it differs from the previous example. In the image with flat colors, the jpeg has a bigger file size than the png. The jpeg has a file size of 64KB, while the png is only 14KB. Both are very manageable file sizes before compression.
Compression
In this example, the compressed png goes down to 5.5KB, while the compressed jpeg goes down to 11.6KB. Not a huge difference in size at this point.
At the original size, the difference in quality isn't very noticeable, but it's a different story when we zoom in a little bit. We can see that compressing the jpeg with few colors creates artifacts where colors clash, while the compressed png remains clean.
To conclude this example, it's generally safer to export an image with few flat colors as a png. As it will generate a smaller file size than the jpeg, and will be easier to compress without losing quality.
So what should I export my image as?
To conclude, as a general rule, an image with lots of colors and gradients (e.g. photos), will do better as a jpeg. They will keep their original quality even after compression, while having a small file size.
On the other hand, an image with only a few different and flat colors will usually do better when exported as a png. The png will have a smaller file size and will stay higher quality.