Jpg Vs Png – What’s The Best For Your Website

Jpg Vs Png – What’s The Best For Your Website

This post is going to be kinda short, because in my opinion there’s not too much discussion needed … as they say – a picture says a thousand words.

Actually, I was a little surprised with the results.

When it comes to optimizing your website for the search engines and for your visitors, the speed at which your website loads is a key variable to consider.

So much so that speed plays an important factor in the Google’s ranking algorithm.

Therefore it makes sense for you to optimize your website and webpages so that you give yourself every chance of ranking in Google.

One of the easiest ways to increase performance is to optimize your pictures on your website.

This is where size matters

The bigger the picture – the longer it will take to load on the page.

So with that in mind I created a wee test to identify what picture format created the largest file size.

The aim was to identify what picture format (JPEG or PNG)  was going to produce the smallest size file without degrading the (perceived) quality of the picture, so that I could use that format when including pictures on my website.

So I took two pictures and created two versions of each picture in JPEG and PNG formats.

Test pictures

The first picture is called before-tribepro and it looks likes this.

jpg vs png test picture 1

 

And the second picture is called before-tribepro2 and it looks likes this. Note: this has a colorful picture of a girl in it.

jpg vs png test picture 2

Note: both files above are 50% smaller than the actual test files.

Here’s are the results

jpeg vs png - results

Summary

If you look at the results above you are going to see that the size of the image is not determined by the format of the picture, but rather what’s contained in the picture.

The first image was almost 3 times smaller as a PNG file than JPEG file.

However, the second image was slightly smaller than the PNG file.

Following these results I did a little more research and found that JPEGS are better to use for photographs and colorful images, while PNG files are better for just plain text pictures, which corroborates the results.

Hope you found this little experiment helpful, if you did, then please leave a comment below or like us.

Leave a reply


*