Use WebP image formatting on your WordPress website to serve images in next-gen formats

What is WebP?

WebP is a next-gen image format developed by Google employing both lossy and lossless compression. Its file size is smaller than JPEG, PNG, and GIF formats and it also allows for transparency and multiple frames for animation.

You may not have seen WebP being used too often because browser support for this has been slow however since May 2021 it is now supported by 94% of the web browsers in use worldwide with Internet Explorer 11 is one of the few not to support it. Luckily Microsoft Teams recently announced that Microsoft 365 products will end Internet Explorer 11 support on August 17, 2021, so in that regard, there is no real reason not to start using this new image formatting.

Why use WebP?

The main advantage of using the newer image format is it reduces page size and therefore improves page performance. There is a multitude of reasons why having a fast website is advantageous, it is important for your core web vitals (a tool that google uses to analyse user experience) which can help improve your google page rankings and improved user experience leading to lower bounce rates and improved sales.

If you’re familiar with Google Page Speed / Lighthouse you may have seen ‘Serve images in next-gen formats‘ as a recommendation, using WebP image formatting will remove this suggestion. It might not seem like a lot but this one image had a saving of over 30% with little loss to image quality, so if you were to swap all your website images for WebP formatting you could save a huge amount of page size meaning a big increase in page speed performance.

How to create a WebP fallback?

Even though support for WebP is very good you should still provide a fallback for the browsers that don’t support it because those users will just see a broken image. One of the simplest ways to use this is by using the picture element which allows us to load a set of images for different requirements. The browser will try and load the images from top to bottom so the WebP image should be at the top as the first image and then the fallbacks should follow.

By using this technique it will try and load the WebP formatting first and if the browser doesn’t recognize it will then load the JPEG formatting. The picture element comes as standard on the GatsbyJS framework by using the gatsby-plugin-image and even converts the file formatting automatically so you don’t have to worry about converting jpeg, gif, and png manually.

<picture>
    <source type="image/webp" srcset="https://wordpress.stephenainsworth.com/images/why-i-use-wordpress_small.webp">
    <img src="https://wordpress.stephenainsworth.com/images/why-i-use-wordpress_small.jpg">
</picture>

How to convert images to WebP formatting

squoosh.app is an application built by Google that can convert an image into various different formats including WebP and comes with a host of different compression settings to make the most out of your file sizes. It gives you a side-by-side comparison so you can see what difference the compression is making to the original image and the file savings in the bottom right-hand corner. Once happy you can download the file and use it on your website as a WebP image.

How to use WebP on your WordPress website

If you have a WordPress website at the moment (June 2021) you cannot simply upload WebP file formats to the Media Library out of the box. However this feature will be included with the new version of WordPress 5.8 set for release July 20, 2021, so not too far away.

If you have a WordPress website that is older than version 5.8 you can use the Allow Webp image plugin that will allow uploading WebP images via the Media Library.

Or if you don’t want to install a plugin you can add the mime_types filter to add the file type to your functions.php file

function webp_upload_mimes($existing_mimes){
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

Using WordPress plugins

If you want to convert all your images on your website to WebP, a number of plugins offer support for this. Although I would advise against doing a whole sweep on your website, it makes more sense to use the correct image format individually to cater to specific images.

• WebP Converter for Media – Convert WebP & Optimize Images
• WebP Express
• Smush – Lazy Load Images, Optimize & Compress Images

Using a CDN

Most CDNs now come with support for WebP. Cloudflare offers WebP optimization through Polish, a feature for pro users which will convert .png and .jpeg images stored at the original web server.

• Using Cloudflare Polish to compress images