When To Use PNGs VS JPEGs & Why It Matters

When it comes to common image formats there are PNGs, GIFs and JPGS. But unless you need an animated image, you’re really only going to be using JPEG or PNG.

Which Format Should I Use?

Great question. Many people are in the JPEG camp for everything and others are in the PNG camp. Others make use of both image formats depending on the situation. But before, you can make a choice let’s look at what each image format excels at.

PNG: PNG is a lossless compression format, that supports transparency, which makes it great for logos. PNG is also a great choice for storing more artistic pieces that require sharp lines or are text heavy. Things that require sharp and clear lines (like icons and logos), are better suited for PNG.

JPG: JPEG is a lossy compression format. This means that there is quality loss, but typically not a lot. Additionally, JPEG images are a great choice for storing photographs. Images of a park or a car, are better suited for the JPEG format. The reason for this is, while JPEG is lossy, these types of images don’t need a lot of detail. For example, sharp lines. The reduced file size will outweigh the minimal loss in quality.

You can think of it as JPEG’s are great for photographs, while PNG’s are great for icons and images that require transparency.

Should I Go Back And Convert All My Years Worth Of Images?

For WordPress, a lot of image optimization plugins will allow you to bulk optimize all images in your library. Many of them will also convert and update related links to that image in your library.

The web performance geek in me wants to say “YES IT IS A NEED!!!!” It really isn’t, as long as you have been compressing your images properly. For example, most of the images on my own website are currently PNGs. A few of them could be swapped, but there isn’t enough of a performance gain for me, or most users, to justify mass conversion.

This is important if you have a large website where conversion might cause issues. For example, if something goes wrong with the mass conversion, then it can cause 404 errors for those images and your site will appear broken. It is a cost benefit analysis, really. Yes, JPEG is the superior format for most images, but it is not worth risking breaking your existing content.

I recommend using the JPEG format for all future images, though, when it makes sense. It is the more efficient option.

Can I Get A Real World Example?

I have image compression on, by default, on my site. Therefore, I am going to include the values as they were on my PC, below the image as a caption.

This JPEG version was 536KB on my PC on upload.
This PNG version was 3164Kb (or 3.1MB) on my local PC on upload.

The images have no real visual difference in quality. However, by changing the format, the image was about 1/6th the size. The best part? Your customer’s don’t care if the image isn’t as perfect of quality, as it is when in a RAW format.

Closing Thoughts

Each format has its own advantages and disadvantages. However, JPEG makes more sense for most images as the compression allows you to deliver a high quality image without hurting the user experience.

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

Leave a Comment