JPG VS PNG – Which Format Should you Use?

There are dozens of image formats. Some open, some proprietary, some confusing and some very simple. If you’re trying to build a website or publish images online, which is best? In ‘JPG VS PNG Which is the best image format for the web?’ we are pitting two of the most popular formats against each other to see which you should use, when and why.

An image is an image right? When you look at the same image saved as a JPEG and as PNG, can you spot the difference? Would someone viewing the images online see a difference? Chances are the answer is no so why bother? Why not just save them as they come and concentrate on something more interesting? If you’re getting into publishing on the web, image formats are something you’re going to need to become familiar with.

Before we get into the JPG VS PNG debate, let’s take a quick look at each format.

JPG or JPEG

JPG is short for Joint Photographic Experts Group, the group of image specialists that came up with the format. Their intent was to make large image files smaller without losing too much detail. Their answer was the JPG file.

JPG compression is lossy, meaning the more you compress, the more image detail you lose. The compression process first removes irrelevant or unnecessary data but will also remove image data. While file sizes can be shrunk drastically, you do lose image quality. As JPEG was created by image specialists, it works best with detailed images, those with lots of color and in larger sizes.

PNG

The PNG file was originally designed to replace the GIF. Instead, PNG files now work alongside GIF files but offer a couple of features that Gif cannot compete with. Most notably, PNG works with transparency which is used a lot on commercial images, logos and media. JPG cannot work with transparency and this is something to remember when choosing between the two.

PNG uses lossless compression which means it does not compromise image quality. There is a cost to that in slightly larger file sizes though. PNG also works well with images containing text as it handles lines very well. It also works best with limited color images or those that use transparency.

JPG VS PNG – Which is the best?

To go back to the original question, the short answer is neither image format is best. They both have strengths and weaknesses and are ideal in different situations. Let’s take a look at some of those situations.

JPG VS PNG – Which is the best for site speed?

Website loading speed is now an integral part of SEO and anyone publishing on the web should know this. The smaller the image file size, the faster it will load so in theory, JPG should win here. In most situations it is best as you can compress files smaller and it works well online.

However, if the image includes text the PNG format is far superior. It may come with a small size penalty but if you can notice a visible difference between the two images, go for quality.

JPG VS PNG – Which is the best for usability?

Which format is best for everyday use? It has to be JPG. Most digital cameras and smartphones save in JPEG format, most image editors have it as the default and all web browsers work seamlessly with the format. PNG is an option when images use transparency, fading or lots of straight lines but will need to be manually selected in your image editor.

If you are working on an image, it is often useful to save it as a PNG until you are finished with it. You can resume editing as you need without losing detail. Then once done, you can save it as a JPG for use on the web.

JPG VS PNG – Which is the best for image quality?

If image quality is more of a priority than site speed then you have more freedom of choice. JPG works well with photographs and detailed images. It also handles color very well and can still offer size advantages. PNG also works very well with detailed images, especially those with lots of straight lines in them. PNG is also ideal for when file size really isn’t an issue.

Of the two, JPG is usually the one to choose as it wins on the usability front and for when you have finished with editing and can flatten the image.

Ask ten different people which image format to use and you will likely get ten different answers. They all have their strengths and weaknesses and are all ideal in different situations. This is one of those debates that will roll on forever. At the end of the day, just use the one most suitable for the image you’re working on in the situation you’re working within. You won’t go far wrong with that!