There’s been a lot of talk recently about WebM, the video file format developed by Google and others to try and move away from using .gifs for animations on the web. What I haven’t seen much talk about is another format from Google, WebP, P being pictures in this case: https://developers.google.com/speed/webp/
The opening paragraphs made some interesting claims about the efficiency of their format:
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.
I decided to try this out. I found some Photoshop plugins over at https://github.com/fnordware/AdobeWebM
I decided to try it out with and without transparency, and used my CSGO sticker file.
First up is transparency, these are the first two pictures. As you can see there is no real difference in quality between PNG and WebP, but the actual file sizes showed a difference:
PNG with transparency: 3.17MB
WebP with transparency: 2.20MB
Difference = 0.97MB
% difference = 30% smaller. Google says 26% smaller.
Now for the jpg vs WebP (blue backgrounds), I first decided to keep the file size at ~160KB to see the compression looked. You can see that the jpg has more colour artifacts and banding, like on the nose. The WebP does look somewhat blurred, you can see some of the patterns of the wooden stock on the AK are lost.
I then decided to look at WebP and JPG on high settings, which are the final 2 pictures. If I was doing this properly I would look into what settings to save each at so they were exactly the same (I think this is what Google called the SSIM index). Anyways I chose 90% quality for WebP and 11/12 (which equals 91%). In terms of image quality I couldn’t find a difference. File sizes:
Difference = 252KB
% difference = 37% smaller. Google says 25%-34% smaller.