What Is The Difference Between PNG and JPG?

File types, file types everywhere! PNG? JPEG? What’s the difference?! Although they are both image file types, they have very unique distinctions between them. In this article we’ll dig into just why they’re so different from each other.

JPG vs PNG

In order for each of these file types to make sense to you, you’ll need to understand some key features these file types have to offer. Along with the benefits of each of these file types, they have their drawbacks as well, which we’ll now discuss.

File Size

Typically JPG files can be as small as 1/10th the size of a PNG using the same image. Why is this? The main difference between these two file types is the compression algorithm they use. JPG uses a lossy compression algorithm that discards some of the file information, in order to make the file size smaller. PNG file types use a lossless compression algorithm that retains all the information in the file.

When using JPG you can compress your image sizes pretty small, without compromising the quality of the image. This only works to a certain point before the image starts to deteriorate in quality. These small image sizes are beneficial to your website, by helping your pages load more quickly.

As a side note, a great tool I use to help manage file sizes before uploading them to the web is Tiny PNG. You simply drag your image file into the box and it will compress your image size significantly! Great tool you should be sure to bookmark. 

File Uses

Alright, so we’ve spent our time so far explaining how JPG outdoes PNG, so let’s discuss the other side of the table.

The main area where a PNG shines is the logo & animation designs, transparent, and semi-transparent images. Okay, so I’m sure you know what we mean by logos and animations, but what do we mean by transparent images?

Here’s an example: Say you’re looking to compile some different pictures together in photoshop with a background image. Which of these file types should I look for? I’ll give you a clue. It’s not JPG! Okay, how do I tell the difference? I’ll show you a dead give away, which is also exactly what we mean by transparent.

Say you’re looking on Google for a picture of a “confused man” (like the image I created above). As you’re clicking on the image previews you can tell which ones are PNG by the checkered pattern around the main image. I’ll show you the difference.