« Automatic Rotoscoping with AutoScope | Main | Generating Sprint Dates and a Sprint Calendar in Visio using IronPython »
Friday
Jan062012

Using the Promising WebP Format for Blog Screenshots

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)

image

 

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.

image

 

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.

image

 

 

QUALITY WITH RESIZED SCREENSHOTS

 

Below is our starting point: the original screenshot

(Original) PNG - 51Kb

image

 

(Resized) PNG – 100Kb

After slightly resizing the image and saving as PNG, the PNG is almost twice as large

0601-600pix

 

(Resized) PNG – 100Kb

After slightly resizing the image and saving as PNG, the PNG is almost twice as large

0601-600pix

 

(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.

0601-600pix-90

 

(Resized) WEBP (75% quality) – 22Kb

This is very hard to distinguish from the resized PNG and yet is less than one fourth the size!

image

 

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

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>