Late last year, I made the case for using JPEG instead PNG for publishing screenshots under certain conditions. In this post I'll examine WebP as as an alternative to JPEG.
NOTE: This post is only about using lossy WebP to replace use of JPEG. The topic of lossless WebP versus PNG is not covered.
QUALITY WITH UNRESIZED SCREENSHOTS
I haven't performed a serious analysis, but based on some sample images in my collection, I am overall very surprised at how well WebP preserves image fidelity and keeps file size small. Below is a very typical example.
The Original PNG (205KB)
The WebP version - 75% quality setting (21Kb)
It's very very hard to pick out any differences and the file is only one fourth the size of the PNG original. They are visible, but it takes a bit of studying to pick them out.
The JPEG version - 20% quality setting (23Kb)
To get the close to the same file size as WebP version I had to set the JPEG quality level to 20%! Even in the very scaled down image below, you can see make out that the JPEG version has compression artifacts. The artifacts are quite visible.
QUALITY WITH RESIZED SCREENSHOTS
Below is our starting point: the original screenshot
(Original) PNG - 51Kb
(Resized) PNG – 100Kb
After slightly resizing the image and saving as PNG, the PNG is almost twice as large
(Resized) PNG – 100Kb
After slightly resizing the image and saving as PNG, the PNG is almost twice as large
(Resized) JPEG (90% quality) – 74Kb
It is only at around 90% quality that the image looks like a reasonable version of the resized PNG and has a smaller size.
(Resized) WEBP (75% quality) – 22Kb
This is very hard to distinguish from the resized PNG and yet is less than one fourth the size!
PARTING THOUGHTS
- For the cases I originally outlined, WebP perform better than JPEG. As always: Your mileage may vary.
- If you are certain that your viewers are using Chrome or Opera, you could advantage of what WebP has to offer
TECHNICAL NOTES
- The WebP encoding/decoding was done with IrfanView
- You can get all the original files here (PNG and WEPB versions): https://skydrive.live.com/redir.aspx?cid=1ff099edb1c7ebfa&resid=1FF099EDB1C7EBFA!1926&parid=1FF099EDB1C7EBFA!1925