When Safari 14 drops around September or October 2020 (expected based on previous releases), support for the WebP image format will be pretty much universal as can be seen from the screenshot from caniuse.com below. But what is WebP and why should you care about it?
What is WebP and why you should care?
WebP is Googles image format which they launched in 2010 and which is now part of their ‘Make the Web Faster’ initiative. Its claims to use a superior and more aggressive form of compression which results in smaller file sizes compared to JPG and PNG formats with only minimal, often imperceptible or negligible quality loss.
In terms of how much smaller WebP format files can be well Google claims that WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable (quality wise) JPEG images.
These figures are impressive, however by reducing the quality level when creating WebP lossy mode images even larger size file reductions can be achieved. When these images are viewed in isolation no obvious quality issues appear particularly at higher quality figures such as 80 or 90%. If you compare a JPG with a lossy WebP at 80% quality side by side and you know what to look for (perhaps your a photographer or graphic designer) you’ll spot small differences. For the vast majority of users on the web however the two images will essentially look exactly the same but one will have a significantly smaller file size. Apart from using less of the users mobile data monthly cap (if capped) smaller file sizes matter because…
Web pages load faster
Smaller images mean faster loading pages. Faster loading pages mean a better user experience and thus an increased likelihood of site engagement and conversion. For example the BCC previously reported that for every additional second in load time 10% of users left, whereas when looking at mobile only data a recent Deloitte Ireland report showed even a 0.1 second speed increase can make real differences to how much users engage.
Faster loading pages also mean potentially higher SEO rankings on Google as they have confirmed speed is a ranking signal (albeit a minor one) for both desktop and mobile searches. This means that not only do faster pages result in users converting more once they are on a site but it may mean more users visit in the first place.
Less bandwidth and CDN costs
Smaller images means less cost to you in bandwidth terms. Most hosting providers allow a certain amount of bandwidth per month and most CDNs charge per GB worth of data transfers. Below are the current costs for Azure CDN.
It doesn’t take too much to reach a GB these days especially if your a popular site with lots of images, perhaps an ecommerce or news site or a site which has user generated content. In this case using WebP can result in significant savings by shaving at least around 20-30% off your image file sizes.
Manually creating and rendering WebP images with graceful fallback using HTML5 Picture tag
There are lots of online convertors which will allow you to convert JPGs and PNGs to WebP format images. These will require you to upload your images one by one, although some support bulk upload. Plenty of desktop software options exist too including Photoshop (with a plugin) and if you use Visual Studio there is a new extension called WebP Toolkit which will enable you to create WebPs from within VS itself.
After you’ve got your .webp images you can render them using the HTML5 picture tag. The below snippet will show image.webp for supported browsers and image.jpg for those that support the picture tag but not WebP. Finally for Internet Explorer and Opera Mini a legacy img tag is provided as fallback as they don’t support the picture tag.
Providing the .jpg fallback obviously increases (more than doubling) your storage needs so keep an eye on your websites analytics to see what browsers are actually being used to hit your site. With the release of Safari 14 in the next couple of months, the need to provide a jpg (or PNG) fallback with diminish quickly.
Generating WebP dynamically on the fly using CDNs or CMS plugins
Converting images manually and including them in your pages like above is fine for many websites but you may have user generated content or may not want or be able to explicitly convert your images each time your content changes. In this case you could look into using a CDN such as Akamai or Cloudfare which will automatically convert and serve a WebP version of your image based on the users browsers capabilities.
If your using a publishing platform like WordPress there a many extensions which can automatically serve WebP versions of images such as EWWW Image Optimizer.