Digital images come in many types, but the two most common formats on the web are JPG and PNG. You may have heard conflicting information from different sources about which one is best. This can make it hard to know what format you should use for your website.
In general, PNG is a higher-quality compression format. JPG images are generally of lower quality, but are faster to load. These factors affect whether you decide to use PNG or JPG, as does what the image contains and how it will be used.
This article will explain in more detail what JPGs and PNGs are, why they’re so well adapted to the web, and what each type does best. Let’s get going!
An Introduction to the JPG and PNG Image Formats
As we mentioned, JPG and PNG are two of the image formats most commonly used on websites. They each use different ‘codecs’ (or compression methods) to store image data. This means that PNGs are better suited for certain uses than JPGs, and vice versa.
JPG is an image format that uses lossy compression. For this reason, JPGs typically have a lower file size, and are faster to load than PNGs. If you’re uploading a lot of pictures, such as an album from an event, using JPGs means you can display more photos without running out of server room, and they will load more smoothly for your visitors.
However, the higher compression also means that every time you save a JPG, it loses some image information. If you save a JPG over and over again, this can cause it to become pixelated. For web use, however, this doesn’t always matter.
For example, in the photo below, the copy (right) is only of slightly lower quality than the original (left). It’s an effect that's really only noticeable when they’re placed side by side:
PNG, on the other hand, is a lossless compression type. This means it saves more data, and results in a higher image quality than you’ll typically see with a JPG. A PNG is also much less likely to be pixelated than a JPG.
That fact makes PNGs ideal for any images containing hard, defined lines or text. Below, the image on the left is a JPG, while the one on the right is a PNG:
What’s more, PNGs can also include transparent elements. This can come in very handy on a website. For instance, you can have an image appear to blend into the page background. In particular, this is very useful when it comes to icons:
However, the downside to PNGs is that they have slightly longer loading times, and higher file sizes than JPGs. While they’re fine to use for important images, you may want to avoid overloading your website and server with dozens of PNGs on each page (unless your site is very well optimized).
Why JPGs and PNGs Are Well-Suited to the Web
There are many types of image formats, so you might be wondering why we’re focusing exclusively on JPGs and PNGs. That’s because these two image types are better suited to the web than most of the alternatives.
There are a few reasons for this, including:
-
Image compression. JPG and PNG images are both compressed for faster loading times, which is ideal for the web.
-
Low file size. The compression process also means that JPGs and PNGs take up less room on servers than many image types, which means you don’t have to worry so much about running out of space.
-
Prevalent integration. Many web tools are built with the expectation that your site will be primarily using JPGs and PNGs. Some browsers won’t even display certain types of files.
In a nutshell, while there’s nothing forcing you to use only JPGs and/or PNGs on your site, sticking with these two image formats will make your job a lot simpler. Plus, it’s a smart way to keep your site lean and running fast as it grows.
How to Determine When to Use JPGs vs. PNGs
Now that you understand the basic _differences between JPGs and PNG_s, you may be wondering whether you should use just one, or a mix of both. To answer that question, let’s go over some basic rules for when to use each type of image.
JPG is the perfect format for the following applications:
-
Complex images. While there is some loss of quality in a JPG when compared to a PNG, it’s almost unnoticeable with complex images (such as photos). This means you can reap the benefits of lower file sizes, without sacrificing aesthetics.
-
Photo albums. When you’re sharing photos in bulk, as in a photo album, you’re best off using JPGs. Their faster loading times means the photos will display more quickly and smoothly.
-
Opaque images. Unlike PNG, JPG doesn’t permit transparency. If an image doesn’t need to be transparent, however, you can often safely go with a JPG.
On the other hand, there are times when it’s better to use PNGs, such as for:
-
Images with hard lines. As we discussed earlier, pixelation is very noticeable on images with hard lines, such as logos and text. For these types of images, you’ll want to stick with the PNG format.
-
Portfolios. PNGs provide the best in quality. So when you need your images to look top-notch, such as in a portfolio of photography or other creative work, the somewhat increased file sizes can be well worth it.
-
Transparent images. If you want an image to ‘blend in’ to the page, rather than having an opaque background, a PNG is your best option.
Some people choose to use only one type of image on their website. This offers the benefit of a streamlined approach, and can work well for sites that use images in very predictable ways. However, we recommend making decisions on a case-by-case basis when possible, and choosing the file type that works best for any given situation.
Difference Between PNG and JPG Conclusion
When you’re first learning about the various image file types, it may all seem a bit confusing. However, if you’re adding images to your website, you’ll almost always want to go with either PNG or JPG. Over time, deciding which file type to use for specific purposes will become second nature.
To recap, here’s when you’ll want to use each kind of image as well as what the difference between a JPG and PNG is.
-
JPGs: Use these for complex images, photo albums or galleries, and opaque images.
-
PNGs: These are best used for images with defined lines, photos that require transparency, and whenever you need the highest possible quality.
Related Resources
Image credits: Pxhere, Wikimedia Commons, JanBaby.
