PNG vs JPG Images - What Is the Difference?

PNG and JPG are by far the two most commonly used image file formats on the web. PNG overtook GIF back in 2013. When it comes to adding images to your website this can sometimes be confusing for people as they don't know which extension they should be using. Today we want to quickly explain the differences between PNG vs JPG.

PNG vs JPG

According to W3Techs JPEGs are the most commonly used image extension, used by 73.5% of all websites. PNGs come in at a close 2nd at 72%. See the difference between JPG and PNG below.

PNG

PNG is a file extension that stands for Portable Network Graphic, and is seen as .png in browsers and operating systems. It is a raster graphics file format that supports lossless compression. This was originally designed to replace the GIF file format. Version 1.0 was released in October 1996 and defined in RFC 2083. The first browser support appeared in IE 4 and Netscape 4. PNG is designed to work well in online viewing applications, such as the World Wide Web, so it is fully streamable with a progressive display option. The MIME media type for PNG is image/png.

Here are a couple advantages to using PNG:

1. Ability to use transparency and or opacity, as opposed to JPG where by default it will retain a white/blank background.
2. The use of color palettes. PNG supports 24-bit RGB and 32-bit RGBA colors.
3. Grayscale images.

Even though PNGs use a lossless compression, they are still generally smaller when seen on the web, primarily because PNGs are commonly used for non-complex images such illustrations. JPGs are typically used for photographs which are much larger.

JPG

When people refer to JPG, you might also see them mention JPEG. These are essentially the same thing. Read about the difference between JPG and JPEG. JPEG, and or JPG, is a file extension that stands for Joint Photographic Experts Group. The ISO standard was originally released back in 1992. It is a bitmap compression format, most commonly used for lossy compression, with compression ratios ranging from 10:1 to 20:1. The compression ratio can be adjusted which means you can determine your own balance between storage size and quality. The JPEG extension is most commonly used by digital cameras and photo sharing devices.

While the JPEG format is great for color and photographs, it is also important to note that there is a slight loss of quality due to compression. And editing and resaving only degrades the quality, even though it might be negligible. One way to minimize this is to work with the RAW JPEGs, determine your edits, and then save out the final version without resaving multiple times.

The MIME media type for JPEG is image/jpeg (defined in RFC 1341), except in older Internet Explorer versions, which provides a MIME type of image/pjpeg when uploading JPEG images. JPEG is also defined with the additional extensions: .jpe, .jif, .jfif, and .jfi.

Photo editing programs like Adobe Photoshop and Gimp, all save JPEGs by default to the .jpg extension, on both Windows and MACs. And if you were wondering, you can change the extension both ways and the file will continue to work.

Summary

As you can see when you are comparing PNG vs JPG there are definitely a few differences. PNGs use a lossless compression ratio and have a few other advantages such as the ability to use transparency and color palettes. JPGs on the other hand, use a lossy compression ratio which makes it sometimes a better format to use with photographs due to the ability to compress the file more.