JPEG or PNG? – Increasing Page Speed with Proper Image Formatting

Google looks at how quickly your page loads when its bots are crawling your site. Images and graphics often affect the load speed more than anything else, but learning how to save image files properly can reduce the unnecessary bloating of image-sizes.

There is no reason to blindly throw images into your website without the proper formatting.

Even if you aren’t interested in optimizing your website for search engines, you should do it for the users. No one wants to wait for a website to load. If you reduce your image sizes your visitors will thank you.

PNG Files

Portable Network Graphics is a lossless file format created with the intent to replace the GIF format, due to the patent restrictions of GIF compression. The project was a success and we now have complete access to the format, which is patent-free, has great compression, and is widely supported by web browsers. PNG files are used primarily for transparent images, simple-color images, and images that have hard lines, like text. There are two versions of PNG files: 8-bit PNG(known as PNG-8) and 24-bit PNG(known as PNG-24). PNG-8 is limited to 256 indexed colors, while PNG-24 has millions.

JPEG Files

Joint Photographic Experts Group created a file format, creatively named JPEG \ˈjā-ˌpeg\, to handle complex-color photographic images. When saving a file as a JPEG, users have the choice of quality vs. compression. More compression results in a smaller file size, but you will lose quality. Obviously, less compression results in a larger file-size, but also a higher-quality image. The great thing about JPEG compression is that you can usually find a balance that both looks good and has a small file size. Unfortunately, JPEG files have no transparency. Additionally, the file format is lossy, meaning that it loses some of it’s data each time it is compressed. If you re-save the same image multiple times for some reason, the image quality may be low.

Still need some clarification? Let me clear it up for you.

The file sizes mentioned are for the image in the bottom right of each example.

This simple-color file is saved as a PNG-8. It has a file size of 1.81KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

The JPEG file can be compressed to about the same size as the PNG, but the quality is terrible.

Does that mean PNG is always better than JPEG? No, there is a reason they didn’t name it the “.PERFECT” format.

While we wait for the best format ever to be created, here is an example of when JPEG can be a better choice:

PNG vs JPEG

Can you tell a difference between the two sides of the image? I doubt it. The full-size PNG has a file size of 402KB, but the full-sized, compressed JPEG is only 35.7KB.

JPEG works better for this image, because JPEG compression was made for photographic images. The compression still works for simple-color images, but the loss of quality is far more noticeable.

Comments

So to illustrate the flower picture, of the difference between PNG and JPG, you save it as one JPG? That’s pretty limiting, Shouldn’t each half be their respective formats? JPG compression and artifacts could be bringing the PNG half down.

Not that it’s a killer, I’m not sure it’d look so much better, but it’s still technically inaccurate to represent them that way.

I replied to you once before, but my message seems to have been lost. The significance is lost(two years later…), but just in case anyone else is reading:

Yes, it was technically inaccurate to compare the image quality of a JPEG and PNG in a single JPEG image. Also, in hindsight, I should have compared two complete images, rather than a split down the middle. Still, the point remains: JPEG is the best option for displaying photographic images on the web in a vast majority of cases.

For clarification and technical accuracy, here is a “real” comparison between the two image types:PNG -403kbJPG – 65kb (60% quality)

Open those in separate tabs and switch back and forth between them. It takes careful observation to spot any real differences, but even those are minimal. At 403kb vs 65kb… just go with the JPEG.

That is most likely because the two sides of the image I used originally have different lighting. Compare these:PNG -403kbJPG – 65kb (60% quality)

If the difference is still significant to you, you may want to look at calibrating your display. I’d suspect that your saturation and/or contrast is off.

After that, if you can still tell the difference, then I’d say that your eyesight is impressive– However, consider my advice and build your site with the users in mind. They will prefer quick load times over 100% lossless images.