Popular Article: About Me & This Blog

WebP vs. JPEG - Which Image Format Is The Best?

2 years ago  •  Reviews

Okay, so I really like new technology. Especially technology that’s open source and directly compete with closed source, corporate money-addicts. This is where the image format WebP really got my attention. Not only is WebP an open format, but it also promises between 28-48% in file-size reduction! Wow! That’s amazing. Even though our internet connections become faster and faster, we still want to savor as much bandwidth as possible and spend less time waiting for a page to load.

Let’s start out with a quick comparison between JPEG, PNG and WebP.

Comparison JPEG PNG WebP
Browser Support All All Chrome, Opera
Open Format? No Yes Yes
Alpha Channel? No Yes Yes
Lossless? No Yes Yes
Animation? No No Yes

This is my rough comparison between these 3 image formats. I included PNG just because. In general, WebP is can achieve a much smaller file size than the PNG format and I'm a lot more interested in seeing if WebP can compete with the closed format, JPEG.

Okay, so what does all the above really mean? Am I not going to compare the formats with actual images? Of course I am! Don’t be silly.

You will need to use a browser that supports the WebP format, before you can actually see the comparison. You can also download the images and make the comparison, should you have other software that's capable of handling WebP. If you do have a capable browser, simply hover over the images with your mouse to see the difference.

JPEG File WebP File

 

I must admit, I'm no photographer, but I am a "perfectionist". I like to have my images look the best they possibly can. Some people just keep compressing their images, ruining the quality beyond crap.

I started out with compressing the JPEG as far as I could, before I felt it started to become pixelated and noisy/grain-ish. I'm sure a lot of people would say I could go further, but I already think I went too far! Even when the JPEG is compressed 60%, its size is still bigger than its WebP counterpart...

JPEG File WebP File

 

Here I couldn't venture that far with the compression before my eyes started to bleed. If you look closely at the stones beneath the white house, on the left, you will see how the stones gets blurry on the WebP image. This is something I see again and again. WebP tends to blur out the image, the more you compress it. When it comes to JPEG, the image gets more noisy. So it really depends on the image. Does it still look fine with a little blur? Or should it look a little noisy instead? It's a tradeoff, I guess. In this case, we save about 20KB if we were using the WebP format, but someone could most likely get the JPEG format down to that size as well, if that person is ready to compromise the quality even further.

JPEG File WebP File

 

Here's one where I just went to the extreme and compressed it as much as possible, without totally ruining the image. Judge for yourself.

I must admit, it's hard to see THAT big of a difference between the two formats in practice. Obviously, JPEG is a lot more convinient for most people. It's a standard and everything supports it's. However, WebP is an open format and I love stuff that's open. That's really enough for me and all it takes is a little PHP, a converter and you are ready to serve the WebP format to Chrome and Opera users, and JPEG for the rest.

There's a good amount of WebP converters out there and I'm sure you'll get different results from all of them. I used gThumb 3.2.7 to compress the images and I really don't have any idea how good gThumb is. I think it did the job though.

Anyway, thanks for reading my very first blog post. I hope you enjoyed some of it. I don't claim to be a pro! Haha. If you have any suggestions or comments, please don't hold back. I'm thinking of doing a comparison between WebP and GIF. So let me know if that might have an interest!

tasty
tasty  •  2 years ago
try this also: http://bellard.org/bpg
WonderingDane
WonderingDane  •  10 months ago
Thanks for that, tasty! I'll take a look :)