Serving your images in a next-gen format can have a significantly positive impact on your website’s performance. We’ve previously written about Lazy Loading assets and how this can help improve your site’s loading speed, now we’re going to talk about the compression and quality characters of next-gen images, specifically the WebP file format, and how you can utilise them.
What are WebP images?
WebP is a modern image format developed by Google. Google first announced the WebP format back in September 2010, and released the first stable version of its supporting library in April 2018.
When Safari 14 was released on September 16th 2020, this meant all the “evergreen” browsers (Safari, Edge, Firefox, Chrome and Opera) supported the rendering of WebP images.
So, how did we get here?
Bitmap (BMP) was the go-to image format back in the 90s and early 2000s. You may have used to spend your time (like myself) using Microsoft Paint, which used BMPs frequently. The issue with BMPs is that they are information rich and not compressed, losing their quality when enlarged.
With the boom of the internet, JPEGs became popular because they were compressed and were the common file format used in camera phones. They are still the most widely used digital image platform today.
As time has gone on, with people having access to high-speed internet and phones taking better quality images, files have started getting even bigger. This became apparent as a problem for people on slower cellular connections (2G, 3G), so WebP’s goal is to compress images even more, whilst keeping their quality.
How next-gen imagery improves performance and affects Google’s score
- Smaller images are generally quicker to download, meaning they’re delivered on slower connections (such as 2G or 3G) quicker – and WebP images have been found to be 25% – 34% smaller compared to JPEG file size.
- Less data will be used to download files when on a mobile connection. This is a benefit to users who are data-capped by their service plan.
- Using WebP images will help cut costs in hosting fees by using less storage and less bandwidth in your projects.
The upcoming WordPress 6.1 update
When it comes to WordPress, currently there are 3rd party plugins you can add to your site in order to use WebP imagery.
With the upcoming WordPress 6.1 update scheduled for October, these tools will be built in and you will be opted in by default. However, there is also the option to disable it. Unless this is done, WordPress will convert all your images to WebP in the new update.
Top tip
Remember when you are updating your WordPress that if you have a lot of images on your site, it will take time to update all imagery to the new format so it’s important to be prepared. However, for any future imagery you upload – it will automatically use the WebP format and will be much quicker.
What if my site isn’t WordPress? How do I tackle WebP conversions?
For platforms such as Shopify and Magento, you can use Cloudflare to tackle WebP conversions on the fly using their paid Cloudflare Images service. This service intercepts image requests and generates a WebP version on-the-fly which gets served to the end-user.
This is also an option with WordPress sites, however if you were originally using Cloudflare Image to generate the WebP versions, you can now look at removing this service and you’ll save 10 dollars a month with the 6.1 update! (According to some news reports this year, that means you’ll be able to afford a house deposit on your mortgage. Good going!)
References
Start optimising your website
Book your free 45min performance review
4 Slots available a month