JPG vs. PNG: the basics.

In the world of digital, there are two image formats that rise high above the rest: JPG and PNG. Who holds the crown for the most superior and user friendly? Well, sit tight, because the coronation is about to begin.

If you were to look at both in an image format, side-by-side, you might not be able to tell they’re different; but trust me, they are. Now, I won’t go into too much detail as to why, because there is a lot of mathematics involved— instead, I’ve created an overview of the main differences to hopefully guide you to choose the right format, for the right occasion.

So, let’s start off with the basics; digital image formatting and compression.

Let’s start with a little compression.

JPG files are a compressed, lossy format. This means that the file size is smaller, but the image quality and detail is reduced as result. Why the name? Well, JPG is an abbreviation for the Joint Photographic Experts Group. The E in JPG is omitted due to file extensions being limited to three characters. In the world of Apple, you’ll find the extension as ‘jpeg’. Like the distinction between tomato and, erm, tomato—while this detail may be largely irrelevant, it’s always interesting to know, nonetheless.

On the other hand, PNG or, a Portable Graphics Format, supports lossless compression and does so as a default setting when saving images. This is especially useful for graphic images, line drawings, and text; but less so for your high-resolution landscape images. You know, the ones that you might take of Yosemite National Park or your dog.

So, why do either of these matter? Well, the answer is simple: image compression and page speed.

While the image may look the same, it can have a varying impact on people who visit your site.

The wrong file type can make it feel like eons before the images on your site load.

The real impact of large file sizes applies primarily to mobile users. A small, hand-held device with limited internet data and a slow connection means no pretty pictures: just content. For those people surfing the web and traveling via train, going through tunnels, or just experiencing a bout of bad reception, this is a slow experience. And, we all know how frustrating that can be. Phones can get thrown at walls, and we don’t want to be responsible for that. It’s important to keep in mind that we want to be gentle with people who have slow connections and poor, unstable reception. So, in order to hold their virtual hand, we must first ensure our images are compressed correctly.

Now that we have grasped the basic concepts, we’ll dive a little deeper. However, this is where it can get tricky. Don’t worry, no maths; just pixels.

The difference is in pixels.

JPG’s method of compression groups together pixels that are like-for-like.

JPG images can often push the boundaries and blur the lines of what can be grouped together. This can result in a bleary image despite the small file size.

However, regardless of small file sizes, JPG is great for images that have more than 256 colours, give or take. This is because pixels can be a little blurred on the screen. This blurring is something that preys on human weakness. This weakness is a result of the human eye’s ability to see light and dark colours (something about wavelengths, the absorption of pigments, and whatnot).

A picture’s always better viewed sans pixellation.

JPG compression takes advantage of what is, and what isn’t, perceptible to the human eye by keeping the brightness in a photo but reducing the amount of colour information. This means that images with all the colours of the rainbow or, with black and white contrast, are best exported in a JPG format. Despite the deception, JPG compression allows for a great deal of control over how much of your image is compressed and how much information you’d like to discard.

Now, don’t let this minor shortcoming fool you. It doesn’t make PNG the crowned champion in the world of digital imaging. PNG might make your image seem clearer, crisper—for graphics, that is. But the file size can often end up being 25% larger (or more) than that of its counterpart, the JPG. That’s quite a feat when talking page speed and loading time. That 25% could make or break the number of users that visit your site.

However, when talking about graphics, PNG files will often be smaller in size when compared to JPG, and we have the added benefit that PNG will not lose any quality in its compression.

If JPG is ditching data to compress the file, why are PNG files typically smaller? Well, unsurprisingly, this has to do with the way PNG compression works.

Think about your favourite brand’s logo – I’ll choose the August one – and check how much of the same colour is grouped together in that image. In the case of the August logo, if we are looking at a white logo over a red background, we can say that 90% of the pixels in that image use the exact same red colour. If we use a completely uncompressed image format like Bitmap (commonly used for printable images rather than those found on the web) we would describe that image using the following list:

A picture’s worth a thousand words, sure. But how many pixels?

• Pixel 1: #ff0051
• Pixel 2: #ff0051
• Pixel 3: #ff0051
• …

If we describe a red background in an image that is 165 pixels wide and 70 pixels high, that is repeating 165 instances of #ff0051 in each of the 70 rows of pixels.

Now think of PNG as a formula conversion for this pattern. We can clearly ‘compress’ this pattern without losing any of the data that has to be drawn. What if we say that for the first row of pixels, we have 165 times the colour #ff0051? We have just saved 164 pixels of information! So rather than a pixel-by-pixel description, as used by BMP, we could describe a PNG image as in the following list:

• Row 1: 165 times #ff0051
• Row 2: 165 times #ff0051
• Row 3: 165 times #ff0051
• …

This means that the more patterns—and colour repetition—we have in one image, the better the PNG compression will work against JPG.

Now, even though we know (and now understand) why we should always use JPG for a beautiful landscape, due to JPG limitations we’re still tied to PNG if we want to add transparency to the image—don’t think that JPG gets to have all the fun.

In the world of PNG, image type can also play a starring role. This is because there are five available image types to choose from as well as two sub-types of indexed colour. Now, we won’t head down that rabbit hole as that will lead us to a whole other type of wonderland. But, the carrot’s dangling: should you choose to dive into the world of PNG a bit more, you can read about it here.

How to choose which file type to use.

Both JPG and PNG are winners in their own way. So, it’s important we play to their strengths and not exploit their weaknesses.
JPGs are best used (but not exclusively) for photographs such as:

• portrait images
• landscape images
• pictures taken on your iPhone or
• pictures taken with a high-definition state-of-the-art camera.

PNGs take the gold when it comes to flexibility, primarily because of their ability to support transparency. PNGs are also great for:

• graphics
• beautiful landscape imagery
• illustrations, and
• app and game development.

The most basic rule here is that regardless of the image format, we must, without doubt, always compress images before uploading them to the web. There are some pretty cool apps, like Image Optim, or websites like TinyPNG that can help in your time of need.

So, which file type FTW?

Well, the coronation is over…and it seems PNG and JPG have equal reign in the world of digital imaging.

Despite all that, we are yet to skim the surface when it comes to other file formats. WebP hasn’t arrived to the party. This ‘new’ image format—developed by Google—is still on its way to becoming a standard, but it’s not supported by all browsers… yet.

We also can’t forget TIFF, GIF and the importance of RBG and CMYK colour modes (who would like to attend as well), but we’ll save that conversation for another rainy, grayscale day.