When Should You Use PNG vs JPEG?

There are many different types of image formats so naturally it raises the question, which is best for your website? In this article, we are going to look at the two most common formats across the web which are JPG/JPEG and PNG. Over the years, a lot of differing opinions has come about which may make it difficult when deciding on a format to use though by the end of this article you will be able to make your own, well-informed decision.

In short, PNG is a higher-quality compression image format. PNG images are typically larger in file size compared to their JPEG counterpart which can make them marginally slower to load, especially on slower internet connections. In comparison, JPEG images are typically lower quality which naturally reduces their file size and makes them faster to load.

Over the years, a lot of differing opinions has come about when deciding which image format to use and when, which may make it difficult when deciding on a format to use though by the end of this article you will be able to make your own, well-informed decision.

JPG / JPEG Overview

As briefly mentioned above, JPG and PNG are two of the most commonly used image formats used on websites today. Both leverage different codecs (compression methods) to store your images data which naturally makes one better suited for certain use cases than the other, and vice-versa.

JPG (or JPEG) uses lossy compression. Thanks to this, JPEG image file sizes are typically lower than their PNG counterpart, and are faster to load. Let’s say you run a web gallery, leveraging the smaller file size of a JPEG file could save you a significant amount of storage space enabling you to upload more, and they will all load more quickly than if they were a PNG image.

It isn’t all great news though and there is a pretty significant drawback to consider. Everytime you save a JPG file, the compression engine loses some image information as part of making the image smaller in file size. If you save a JPG image repeatedly, you will notice the image quality dropping with each save all the way until it is pixelated and wouldn’t look very good on your website.

With that being said, if you are not repeatedly saving the same JPG image the initial quality loss should be very insignificant and almost hard to tell so it may not matter for your web use.

JPG vs JPEG – What Is The Difference?

You may have noticed we referenced both terms JPEG & JPG above so what is the difference? Well, frankly there is no difference for your images between JPG and JPEG.

The only difference is the name of the file formats. The shortened version (JPG) only exists because in earlier versions of Microsoft Windows, image formats was limited to 3 characters. Through this limitation, JPEG was renamed to JPG.

Today, Microsoft Windows allows for longer file and image extensions (more than 3 characters) however, .JPG has already become so mainstream in the Windows environment to the point it stuck around. In fact, you can simply rename a .JPG file to .JPEG (and vice-versa) and the image will continue to work.

PNG Overview

Unlike JPEGs, PNG leverages a lossless compression engine when storing image data. As a result of this compression engine, it will naturally save more image information resulting in higher-quality images, but also larger file sized images. The key advantage to this is images are much less likely to get pixelated with repeated saves ensuring an optimal look across your website.

Another significant advantage of a PNG image is the ability to save transparent images. This gives you the significant advantage of having images blending into your website far better than a JPG image, especially on coloured backgrounds.

While the advantages of a PNG image file sounds great, it does come with a small drawback of being larger in file size which means it can take a little longer to load compared to their JPG counterparts. In a day where site speed plays a significant advantage to your SEO efforts, it is important to ensure you don’t overload a single page with many large file-sized images hurting your website visitors experience.

Why JPGs and PNGs For The Web?

There are countless image formats available for you to use, so naturally, you might be wondering why were focusing on JPGs and PNGs. Quite simply, these two image formats have spent years becoming the industry norm for web images and have become better suited for the web than most alternative image formats.

A few reasons for this includes:

• Images are Compressed – While both formats compress images in different ways, images are still compressed. This results in faster loading times which is ideal for SEO metrics and those on slower internet connections.
• Lower File Size – A lower file size, through compression, results in your visitors being able to load your website contents (and images) faster than a non-compressed, full-sized image.
• Widespread Usage – PNG and JPG images have become the norm for website visitors, and software platform developers. This is evident in CMS platforms implementing support specifically for PNG and JPG images (For example, did you know WordPress requires a ‘hack’ to get .SVG files working?)

In other words, there is nothing stopping you from using another image format on your website. However, JPGs and PNGs specifically may make your work a lot easier

In a nutshell, while there’s nothing forcing you to use only JPGs and/or PNGs on your site, sticking with these two image formats will make your job a lot simpler. Plus, it’s a smart way to keep your site lean and running fast as it grows.

When To Use PNG vs JPG/JPEG Images?

With a basic understanding of the differences between JPG and PNG images, you may be wondering, should you use one image format, or used both on your website? The answer to that, it depends.

JPG is perfect for specific use cases, for example:

• Complex Images – With complex images (such as photos) the more aggressive compression becomes hardly noticeable. This allows you to benefit from the smaller file-size without compromising on aesthetics.
• Opaque Images – Remember the fact JPEG doesn’t allow transparency? If your image does not need to be transparent, JPEG should be a safe bet for you. If transparency is essential, that essentially rules our a JPG/JPEG image entirely.
• Photo Albumns / Galleries – If you are storing and sharing images in bulk, such as a web gallery or a photo albumn, you’ll be best off using JPGs. The faster loading times for your many images, and reduced storage consumption will allow you to upload more files, while improving your users experience.

On the flip side, PNG images are better for these specific use cases:

• Images With Hard Lines – Pixelation is a real thing in JPG/JPEG images. On images with hard lines the pixelation can become very noticeable making PNG an ideal solution to ensure a pixel-free visual experience.
• Main Site Images – If you run an eCommerce store it is only natural to want to show off your best work. Using a PNG will maintain the high-quality images, giving better visuals which can potentially increase your conversion rates.
• Transparent Images – If you are looking to blend your image into a page, PNG becomes the natural first choice given the lack of support for transparency in JPEG images.

With all the above in mind, we recommend using a mix of both PNG and JPEG images across your website depending on your specific use cases (as detailed above), on a per-image basis.

PNG vs JPEG Conclusion

When you are starting to build your website and are learning about the various image file formats, it may come across as confusing, or you may be wondering does it really matter? However, when working on your website, you will want to find the performance balance between the file image formats as each has their own set of pros and cons. Overtime, deciding on whic image format to use will become second nature.

Looking back, here is when you’ll want to use a PNG image over a JPEG image and vice-versa:

• JPGs: Use for complex images, on pages wit large collections of images (such as a photo gallery or albumn), and for images that doesn’t need transparency.
• PNGs: Use for images with hard/defined lines, photos requiring transparency, and for images where you need the highest possible quality (such as your main marketing website, portfolios, resumes etc).