Crushing the Ever-Loving Shit Out of an Image with WebP

I've been working more and more with large-sized background images on websites lately. You can see one on my make-believe-jazz duo's website — Inky Shadows. Today I remembered a thing that Google unveiled a couple years ago called WebP. I don't really recall the technical specifics other than it employed some sort of lossless compression technique (or close to lossless; better than a jpeg) that resulted in really small file sizes. At the time I was reading about it was only supported in Chrome and some hoopla regarding WebM, the complimentary video project, and copyright infringement.

A few things have changed on that front. It's supported in Chrome, Firefox (The Can I use... site says it doesn't, but the Wikipedia page for WebP and my experience with the current version suggests it does), Opera and some Android browsers natively now, but it's also really easy to start using it in non-supported browsers thanks to WebPJS (I debated for a solid minute here if I should call it a shim, polyfill or something else. My instinct was shim, upon reading this definition I thought polyFill was the better match, but then I read this and now I'm back to square one. Oh well.). You can simply drop that script into your site and add WebP support to non-supporting browsers.

So I played around with a few images and ImageMagick converting images into WebP format and was sold on it pretty quickly after I was able to reduce a 532kb image to 19kb(!!!). The size savings will vary a bit depending on the nature of your image — They also won't always be so drastic. I suggest reading up on the comparison study in the developer documents. Images with large swaths of similar color generally work best. — but it's always smaller than a jpeg and you don't really need to worry about artifacts and quality degradation.

Because I found this helpful, here's the format you'll use with ImageMagick on the command-line:

convert -define webp:lossless=true -quality 50 original_image.jpg new_image.webp

What's the catch?

Well, in my case the biggest catch was how to get my clients to start using the format. A growing amount of software supports the format in some capacity, but it's not always straightforward and sometimes requires a plugin. Photoshop and WordPress — two very different pieces of software than come up a lot in my line of work — are two perfect examples. There's a freely  available WebP plugin for Photoshop and a no-nonsense WebP plugin for WordPress as well.

So am I telling all my clients to start converting their images to WebP format for their blogs and so forth? Not sure. With the continuing popularity of large, responsive background images and the inevitability of hi-dpi displays becoming mainstream on the horizon, I may start to.

Interestingly, the thing that really made me re-explore this topic was noticing  that OkCupid (Ahem. Mind your business.) uses WebP! Seeing as they are a site with non-trivial bandwidth requirements I saw this as a pretty-good endorsement, though to be fair they seem to have a penchant for using technologies you don't often see in web-stacks, like C++. If a site with that much traffic from literally all-over the world is leveraging it then it's probably mature enough for me to start consider using it in my projects.

And really, if I want to start using this what I need to do is write some kind of WordPress plugin that automatically converts uploaded images to WebP instead of putting the onus on my clients. That was actually the kind of plugin I was hoping to find initially but it doesn't seem to be out there. I guess I'll have to add it to the ever-growing list.

More assorted WebP links I couldn't figure out how to tie into this post:

• Faster, smaller and a more beautiful web with WebP — An article (with a video) discussing the benefits, approach and technical matters more in-depth.
• Convert images to WebP — A kinda-junky but simple-to-use site for converting images online. Useful for the aforementioned scenario where I decide to tell my clients to try using this format but they don't have Photoshop or any other real graphics editing software installed.
• WebP Encoding with ImageMagick — My earlier example only used a few of the options ImageMagick offers. There are tons. ImageMagick is like witchcraft, right-along with ffmpeg.
• Precomplied utilities and libraries — Provided by Google, for use either on the command-line (not really necessary if you'r e already using ImageMagick) or including in your own application.