How To Display WebP Images with a JPG/PNG Fallback & Automated Solutions for WordPress
A quick guide on WebP, why you would want to use it, and how to quickly implement WebP on your website using the <picture> element (or an automated solution for WordPress).
What is WebP and Why Should I Use It?
Created by Google from technology originally developed by On2 Technologies, WebP is a new image format that makes use of both lossy and lossless compression.
Ultimately WebP is designed for the purpose of speeding up the web and reducing bandwidth – allowing site owners to simultaneously make more money with faster loading websites, and also saving money by reducing bandwidth/hosting/CDN costs.
Compared to JPGs or PNGs, you can save as much as 30-80% on the file size of images – depending on file type and optimisation levels. You can find a gallery of images comparing JPG with WebP here.
If you have multiple images the effect is especially noticeable, as the image below from Ebay shows. You can see how many more full product images are visible after 0.7 seconds when using WebP.
Editors note: the image below should be a WebP file if you are using Chrome.
Image source: Ilya Grigorik
How To Implement WebP using <picture>
There are a lot of different solutions to integrate WebP out there that have been born – and some that have potentially become redundant – since WebP was first announced in 2010.
I’m not going to discuss them all here – I wanted to concentrate on a simple and graceful way you can implement WebP images in your web pages without having to add any additional libraries, .htaccess rewrites or making your server encode WebP on the fly – all of which will maximise the potential speed increase you can achieve.
First, the bad news, WebP images only work in Chrome, Opera and a handful of other browsers (not Firefox or IE/Edge).
The good news, with a nifty bit of HTML it is possible to specify a fallback JPG/PNG/GIF image that will display in any browser that doesn’t use WebP images.
This is without having to use an additional library, or anything else especially technical.
Using the HTML5
Here is an example of the code, as taken directly from Opera Dev site:
<picture> <source srcset="opera.webp" type="image/webp"> <img src="opera.jpg" alt="The Oslo Opera House"> </picture>
Responsive Images, Art Direction & Retina
It would be negligent to write this article without mentioning that using the
<picture> element it is also possible to do various responsive / art direction techniques.
That is covered extensively elsewhere, but what is even more awesome is that is possible to combine responsive/art direction, retina images and WebP – all at the same time.
Here is example code, again taken directly from the Opera Dev pages.
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot.webp" type="image/webp"> <source media="(min-width: 1024px)" srcset="opera-fullshot.jpg"> <source srcset="opera-closeup.webp" type="image/webp"> <img src="opera-closeup.jpg" alt="The Oslo Opera House"> </picture>
And with Retina friendly images:
<picture> <source srcset="opera-1x.webp 1x, opera-2x.webp 2x, opera-3x.webp 3x" type="image/webp"> <img src="opera-1x.jpg" alt="The Oslo Opera House" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x"> </picture>
Automated WebP Solutions with WordPress
WordPress Cache Enabler & Optimus
If you have WordPress and want to try an automated solution – there are not many choices out there. One automated solution is by combining the use of WordPress Cache Enabler and the Optimus ‘WordPress Image Optimizer’ plugin – a platform with a free plan that unfortunately limits file size to 100kb, which is too low for most standard sizes images.
Only $29 however will get you the Optimus HQ plan which has a huge 5mb limit.
Jetpack have recently announced full support for WebP usage with self-hosted blogs using the Photon service.
Although this is might be perfect for some people, from testing I and others have found that Photon unfortunately does not appear to be a great platform if you are looking for load speed improvements.
About Search Candy
To find out more about how we can get help click here to get in touch.