.webp image format

WebP is an open-source image format, developed by Google that provides lossless and lossy compression for images on the web – I had heard of it before but after a great talk from Bruce Lawson at the Awwwards Conference in Barcelona last week I feel inspired to look into it a bit further…
WebP lossless images are 26% smaller in size compared to PNGs and are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes.
Quicker websites mean more conversions
So what does all that mean?!? Well basically using .webp images in your website could potentially make your website faster to load and therefore lead to higher visitor engagement, retention, and conversions.
Do we use them?
So before we start preaching, we dont use them on this website. Also we dont usually use them in websites we design for others. The reason for this is just because “we’ve always used jpg & png’s” and this is probably the case for most developers.
Photoshop also doesn’t support (sort it out Adobe!) them without using some crappy plugins (which dont work very well) and also older browser support is a bit poor. All this aside the .webp format seems to be here to stay and more importantly, it makes sense to start using it.
Some proof…
So how about some proof? Here is a 1000px X 663px and 304KB picture of us all collecting an award at the digital entrepreneur awards in jpg format:
And here is the same picture in .webp format: (just 60k in size!) – if you can’t see it your browser doesn’t support it 🙁
Browser support
Google Chrome and Opera natively support WebP. All WebM-compatible browsers can also display WebP via a JavaScript shim. WebP can also be displayed in all major browsers using the WebPJS JavaScript library, although support in Internet Explorer 6 and above is achieved using Flash.
Making .webp files
As mentioned before, the world’s most commonly used image editing tool has no native support for .webp and the current version (CC 2014) doesn’t even have a plugin that works so we are left having to use a range of tools to convert .jpg’s into .webp such as: (these were the best we could find)

Annoyingly WordPress needs updating to allow .webp images to be uploaded via the media upload tool – by default it doesn’t allow them (sort it out WordPress!) but a quick tweak of the functions.php file – add the following:
function cc_mime_types($mimes) {
$mimes['webp'] = 'image/webp+xml';
return $mimes;
add_filter('upload_mimes', 'cc_mime_types');

The .webp format (hopefully) is here to stay and it has some amazing selling points. It is supported in most browsers and if Photoshop gets their act together it should become a new standard for images. The transparency ability is also a huge bonus and the incredible levels of compression are all we should start using it now.
Find out more:

Written by Oli Yeates


Follow Oli on Twitter