PNG vs. JPG

Although GIFs are occasionally still used when an animation is needed, almost all of the pictures on the web now are either in JPG or PNG format. These two formats both represent the best in quality and size tradeoffs that make them perfect for web images. Of course, your use of them is not limited to the web. They are great all-around formats for a variety of use case scenarios. In this post, we'll take a deep dive into the two formats and give you the tools you need to decide when to use PNG vs. JPG by explaining the strengths and weaknesses of each format.

Disclaimer: We use affiliate links to the products mentioned on this page. When you click an affiliate link and make a purchase, we receive commissions. If you want to support our portal, you can use the links. Otherwise, you can find the recommended products using a search engine.

In order to understand the difference between JPEG and PNG, we must first understand the difference between lossy and lossless compression. With a few exceptions, all images formats are compressed in some way. An uncompressed image could contain up to 32 bits per pixel. With images now measuring millions of pixels, the file size can get huge very fast. It is especially important for web use that these images are not sucking up massive amounts of bandwidth and taking forever to load when a customer visits a site. Of course, smaller file sizes also keep our hard drives from filling up on us too fast.

There are two main ways to compress a file. Lossy and Lossless. These two methods make up the heart of the difference between PNG vs. JPEG. Lossless image compression shrinks the file without any loss in quality. This means reduces the amount of compression that can take place but makes it unnoticeable to the end-user. For instance, an image optimizer like Imagify would easily reduce your images size without sacrificing their quality. If we want to take the image size down even further, we must use lossy image compression. A lossy image compression algorithm will, as the name implies, lose some of the image data during the compression process. By intelligently discarding some of the data, the image size can be reduced much further than a lossless compression format would allow for.

You've probably guessed by now that one of these formats is lossy and one of them is lossless. Now that you understand the two main types of compression, let's see how this relates to choosing between PNG or JPG the next time you need to save an image.

The older of the formats, JPEG is a lossy format. It was first introduced back in 1992 and has its roots in methods that date all the way back to 1973. It works by using the knowledge that our brain discards certain high-frequency information and intelligently discards that information from the image. Of course, a JPEG file can opt to discard more information than our brains would to further reduce the size of the file. It is also not nearly as intelligent as our brains are at deciding which information is safe to discard.

Because it works by discarding high-frequency information, things like rapid hue shifts and changes in gradation, JPEG does not work so well for images that consist more of solid colors than of rapidly changing ones. In those cases, it still discards information, but our brains are no longer ignoring the fact that information is gone. The result is that the compression artifacts are highly visible and the image quality does not look as good as it would on one with more fine details.

The JPEG format does theoretically allow for a lossless format, but most software does not support that option. The lossy format also allows the user to adjust the amount of compression that they want to apply so they can tailor the compression to the specific image being used, but there will always be some compression applied.

First appearing in 1996, PNG was designed to be a replacement for the GIF format. GIF was hindered by patent issues and only supported 256 colors at a time. As monitors at the time were now supporting millions of colors, GIF was no longer sufficient from a quality perspective. JPEG existed by that time for the higher color needs but suffered from lossy compression that made it unsuitable for many image types.

Since JPEG is the lossy format in our JPEG or PNG showdown, it stands to reason that PNG is the lossless one. There are actually several different lossless compression filters that PNG can use. It can support a variety of different image types as well. Those image types are:

• Grayscale - A simple black and white image.

• Indexed - An image made up of indices into a color palette that is limited to 256 colors.

• RGB - A truecolor image, composed of millions of possible colors.

Unlike JPEG files, PNG allows for transparency in the image by storing what is called an alpha channel. All three of the image types supported by the PNG format can contain transparency. PNG's adoption over GIF was slowed, due in part to the fact that the Internet Explorer web browser had a buggy implementation of the format up until version 9.0. Now, however, you are only likely to see a GIF when its animation feature, not supported by the base PNG format, is needed.

So, how do you decide between JPG vs. PNG for your project? The answer depends on your needs. Because photography is almost always dealing with high-frequency images, filled with the types gradients and fine details that real-life object has, and that our brain's own filtering methods evolved for, JPEG makes the most common choice for photos.

There are exceptions to that rule, of course. One problem with lossy compression is that if you will be opening it and then saving it in a lossy format again, you've just doubled your loss. This means that lossy file formats degrade each time you open them and then save them. Keep in mind that multiple saves of the same open file will not cause this to occur. It is the act of saving and then reopening that will trigger the additional loss. If you plan on doing multiple edits of the same file, take this into consideration.

If your image is a drawing, which will have lots of spaces with solid colors, or even a photograph with a fair amount of text overlayed on it that also has large amounts of solid colors, then you are going to want to opt for PNG. As we mentioned in the lossy vs. lossless section, lossy formats such as JPEG lose their quality when large spaces of solid color are used.

If you need a format for printing and your printer supports the RGB color space, then most of the same recommendations for JPG or PNG apply as they do above. Typically for print, the question of JPEG vs. PNG isn't relevant, as professionals will use a higher quality format such as TIFF or PSD.

If your need any photo equipment, check out what Amazon offers: