• Tutorials

PNG vs JPG. Which is Better? None of Them

Most probably you have met this picture on the web:

It’s definitely cool and shows the exact difference between JPEG and PNG formats: JPEG is lossy and PNG is lossless. Nevertheless, the image is quite unidirectional: after looking at it you can decide that you should always use PNG to have your pictures nice and clean. However, this view is very superficial, because there is no universally better format. Everything depends on the situation: in some cases JPEG is more suitable, in other cases PNG will be the only proper choice. So, answering the question strictly: JPG vs PNG – which is better to choose? – I would say: none of them. Below I reviewed pluses and minuses of both illustration formats for the web and outlined the ways of their relevant usage.

* * *

PNG

Just an example of PNG picture – Google search page screenshot.

Let’s begin with PNG (Portable Network Graphics), which is usually claimed to be obviously better. Indeed, it gives an opportunity to save graphics files without losing any data, therefore PNG images are always clear even in small details. It’s a huge advantage, once you are dealing with logo, line art, technical drawing – everything that requires high resolution, deep colors and other features of clearness. Also, PNG is surely a king format for working with fonts and typography. That’s why PNG is so recommended for making comics and maybe due to that reason the picture at the beginning of the post is so open-armed towards PNG.

However, PNG is not so ideal as you could think. If we imagine the situation when there are only PNG pictures on the web, it would be hurt, because most probably web apocalypse would occur. The lossless feature of this format has the flip side of the coin: the size is always large. And once you overload your website with PNG pics, it would be totally slow – what a pain for today users with their addiction to fastness and mobility. That’s why I told you about web apocalypse – slow web will be the end of the web, especially considering the growing authority of mobile internet and therefore – limited mobile connections. Then, JPEG hurries to rescue!

So, in result we have such conclusion about PNG:

+
Clear and nice
Better lettering
–
Too large for the web

* * *

JPG

Compare this JPG Google page screenshot with the previous example and see the difference in quality.

As I have mentioned, JPEG a.k.a. JPG (Joint Photographic Expert Group – name of creator) come in handy, once we need to post a lot of pics of the web. And really: JPG is used for storing photography and other illustrations on the web in the vast majority of cases. It makes web slight and light like a feather. All this slightness exists thanks to lossy essence of JPEG, which compresses the images making them weight less. However, this lightness has its price, because JPG pictures are worse in their quality. For example, you can see these famous sand stains around the lettering in the head picture. So you definitely shouldn’t use JPEG if you are presenting some fonts and typography in the illustrations. In general, it concerns every important element on your website you want to look nice.

In this case we get the dilemma, because everyone probably would like to have all the pics nice and steady, but putting all of them in PNG would make your website slower than a turtle. Of course, it’s better to define for yourself, when to use JPG. In most case this format is appointed to demonstrate some simple images like photos, blog post pictures and other fugitive visual information. This will give an opportunity to keep branding elements, for instance logo, in high-quality PNG format without losing speed of your website.

So, the verdict for JPG:

+
Compression makes images lightweight
Good for plenty of secondary illustrations

–
Low quality

* * *

I hope, this post will help you to figure out which format use you should use for pics on your website. As you can see, choosing between PNG and JPG definitely makes sense. Good luck and don’t be confused:
PNG – high quality, large size.
JPG – low quality, small size.

Put your considerations in the comments below.

About the author:

Art Rivera: Deeply interested in everything connected with Internet, I sincerely suppose the web is the only future reality for the humanity through its inevitable involving into every part of human life. I’m not a great fan of cyberpunk concept, but the world is keeping that certain direction of total connectedness. And of course there should be someone, who can write the history, who would describe and analyze and enter in the record all notable changes and tendencies on the web. Hello, it’s me.