JPG vs PNG: Which to Choose for Your Website?

When choosing photos for your site, it is not only what is in the photos that matters. In fact, choosing the right image format can be equally as important. So let’s talk about JPG vs PNG, which to choose, and why.

If you go for a wrong format, you might end up with a slower website, higher bounce rates, and lower conversion rates – and that is not what you want, especially when it can be easily avoided. 

The Difference between PNG and JPG

Let’s start with the basic definitions.

PNG stands for Portable Network Graphics, with so-called “lossless” compression. That means that the image quality was the same before and after the compression.

JPEG or JPG stands for Joint Photographic Experts Group, with so-called “lossy” compression.

As you might have guessed, that is the biggest difference between the two. JPEG files’ quality is significantly lower than that of the PNG files.

However, the lower quality isn’t necessarily a bad thing.

What is JPEG?

JPEG images are a common choice for images produced by digital photography and they are a good choice for pictures with complex colors and shading.

While the loss in quality is little perceptive with JPG’s 10:1 compression, the smaller size makes JPEGs suitable for web use because reducing the amount of data used for a photo is helpful for responsive presentation.

On the other hand, JPG pictures aren’t the best choice for line drawings and other textual or iconic graphics because of the sharp contrasts between adjacent pixels. If you want to use an image of that type for your site, you should probably consider using lossless graphics formats.

What is PNG?

PNG was created as an improved replacement for GIFs and it has become the most common lossless image compression format on the Internet.

So what is a PNG file?

Known as Portable Network Graphics, PNG image can be palette-based, grayscale, and full-color non-palette-based RGB/RGBA.

PNG file format was designed specifically for transferring images on the Internet rather than for print graphics and, as a result of that, does not support non-RGB color spaces such as CMYK.

The big plus is that .png offers a variety of transparency levels which means that PNG background can be completely transparent which is important for png logo designs and similar. It is also the best choice for pictures with fade effects.

JPG vs PNG – the Basic Rule

Since both JPG and PNG format have their pros and cons, you should get the most out of both of them and play to their strengths.

In practice, that means that you should use .jpeg for photographs, and .png for graphics and screenshots.

Does It Really Matter?

When talking JPG vs PNG and comparing the two side by side, the truth is that you won’t be able to see much of a difference in the photos.

So if PNG pictures don’t look that much better JPGs, why not always use JPG format and make things easier for yourself?

Unfortunately, it’s not all that simple and the reason for that is image compression.

You want the highest quality image format but you also want to have a responsive website so you need to really take the difference between jpeg and png into the consideration and particularly the difference in image compression.

Think about it like this: Image compression means reducing the image size without sacrificing the quality for the sake of the size. Generally, stronger compression equals smaller file size which equals worse image quality.

So if you want a good compression, you need to find the right balance between the quality and the size of your file.

When you look at the image saved in your computer, you see the best version of it because the file has not been compressed. However, if that same image is on the website, it needs to be downloaded in order for you to see it.

Logically, that means that the larger the image – the longer the loading time.

Image Compression Services

There are many services and tools for image compression and here are some the good ones you can use for jpg or png:

•           Kraken.io – great balance between the size and the quality

•           The Kraken WordPress plugin – automatic compression of images you upload to your site

•           WP Smush – a WordPress plugin that will compress your images automatically
 

Pictures Containing Text

From time to time, you will want to use pictures containing text and choosing jpeg or png really matters here. PNGs are usually a better choice for pics of this type, as well as for graphics with fine details.

An important difference between jpg and png is that with JPGs, the contours of the letters, as well as the fine lines from graphics, usually appear less sharp.

Regular Pictures

And while the graphics and the images with letters are usually better-looking in the .png file, with the regular photos, JPG is a better choice for the web because if the smaller size.

If you decide to use PNGs only, they will slow your website which can lead to frustrated users.

Resizing Images

Apart from compression, you could also consider resizing the images you want to use for your web design. The good news is that resizing isn’t a complicated process and there are two ways to do it right:

1 – Use some of the resize tools that will allow you to manually shift the edges of the image. If you want to maintain the original height-width ratio, make sure to grab a corner of the image instead of one of the sides, and it will allow you to resize your image proportionally.

2 – If you don’t want to resize the image by manually adjusting it, or if you need an image of a specific size, you can use some of the advanced graphics programs that will allow you to specify the image size and then adjust time image accordingly.

However, sometimes the images get a bit out of focus after being resized so consider using some of the sharpening tools before exporting it as png or jpg.

PNG vs JPG When You’re Not Sure

By now, we know that JPGs are better for photographs, while .png images work better for graphs and pics with text. But what is better for the images that are somewhere in between?

 Screenshots are a good example of that because they often contain photographs as well as text and sharp lines.

However, when it comes to JPG vs PNG when talking about screenshots, it is almost always better to use PNG format to retain the sharpness and the readability of the text in the picture.

At the end of the day, if you are still not sure which format you should go with, you could always save the picture in both of them and then compare them and decide which one you think fits your needs best.

Ending thoughts on JPG vs PNG comparison

Now that you know what PNG file is and what the difference between a PNG and a JPG is, it should be easier for you to choose the right format to keep your website both good-looking as well as fast and responsive.

When talking about JPG vs PNG there are a few key things to keep in mind.

PNG is the best choice for graphs, the pics with text, screenshots, and for designs that require the use of transparency, such as logo designs and similar. However, the biggest downside is that they are greater in size and they will slow down your website.

JPG, on the other hand, is smaller and faster to load, but the compression comes in hand with some loss in quality which is usually not a problem for photographs, but it can be bad for text or images containing fine lines.

So which one should you use? Well, it depends on the type of the image and on the type of the website you’re building.