Choose JPEG format over PNG for smaller image file sizes

There are three types of famous image formats

1. JPEG format - Good for Photographic images
2. PNG format - Good for screenshots and illustrations
3. SVG format - Good for icons and animated illustrations.

And then there are two types of image compression.

Lossy compression and lossless compression

Lossy compression simply means the image will become blurry and low quality when it is compressed.

But lossless compression tries to maintain the high quality of the image as much as possible.

JPEG format uses lossy image compression while PNGs and SVGs use a lossless compression.

So, because of lossy compression, the images in the JPEG format are usually smaller in file size when compared to the PNG format.

For example, if you notice in the above screenshot, both the images are 1000px wide and compressed using Tinypng.

But the image in JPEG format is almost 70% smaller in file size.

Having said that, the quality of the jpeg image is a bit reduced.

Use JPEG format for photographs

According to my experience that involved compressing at least 1000 images:

1. Photographs in JPEG format are smaller in file size when compared to PNG
2. Photographs in JPEG format don't look damaged

So, it is recommended to use JPEG format for all your Photography based images.

But this is not the case with screenshots, illustrations, icons, etc.

Screenshots in JPEG format lose their quality after some good compression.

For example, the screenshot that got compressed as JPEG and the text inside it got blurred and could be difficult to read for people with visual impairment.

So, try to use the PNG format for screenshots and illustrations

Basically, screenshots and illustrations will lose their purpose if they become unreadable due to compression.

So, it is important that screenshots and illustrations don't lose quality in the name of compression.

This is where PNG shines.

Because of the lossless compression involved with PNGs, the images will still look good after some substantial compression.

So, it is recommended to use PNG format for screenshots and illustrations even though they are a bit costly in file size.

I break these rules every now and then

For some reason, I am always obsessed with optimizing images to save file size.

It is because I know how poor optimization is expensive in terms of migrations and hosting expenses.

I write a lot of content with a lot of images, right?

So, when it comes to choosing JPEG vs PNG formats and when I am not in a hurry:

1. I first try to export the screenshots using JPEG format and check their quality after compression.
2. If the quality is good, I will go with JPEG format.
3. If the quality is a bit bad, I will go with PNG.

And I would recommend the same process for you if you have the time.

Case study time

When I was writing my free book called "Learn WordPress Theme Development", to save some file size, I was using JPEGs for screenshots.

I didn't perform any compression and each screenshot was at around 500kb at least.

I didn't perform the compression because I needed to re-use those high-resolution images for publishing my physical book.

But it was a big mistake that I used JPEGs for screenshots and then compressed them.

There were 700+ screenshots that I created for that course and they were loading pretty slowly on my website.

So, I used an image compression plugin thinking that I can just sit back and relax.

But I was shocked to see that the quality of the images got greatly damaged because I was using JPEGs.

It was then I realized that JPEGs are bad for screenshots that go through compression.

On top of that, while trying to fix the settings of the compression plugin, I faced a server outage and my site went down because that plugin was compressing my other screenshots in the background.

It was using a good chuck of server resources to optimize those images.

Remember my mistake and please be careful about choosing the right type for your image.