If you’re reading this, chances are you already know how important it is for a website to load quickly. But if you didn’t, we wrote about the importance of having a fast website, with a free tip for checking how your website performs and getting tips for how to improve it. Here’s a guide to why and how to use WebP images for a faster website.
Often images are the largest files that a browser has to load when it loads a web page from a server. It’s always good practice to scale images appropriately and compress them, but there’s only so much file size reduction you can do with JPEGs.
WebP is an image format invented by Google with superior compression to standard JPEG and PNG, allowing images to be smaller in file size without a loss of quality.
Google invented the WebP image format to help speed up the web, so they therefore recommend the use of next generation image formats like WebP, JPEG 2000 and JPEG XR in their Pagespeed Insights tool.
What real-world difference does WebP make?
WebP combines featuers of JPEG, PNG and GIF formats, allowing for alpha layers and animation.
Counter-intuitively, the higher the quality of a WebP image, the better it performs compared to JPEG compressed images.
Smashing Magazine’s The WebP Manual, by Jeremy Wagner
In my test of the method of WebP compression that I describe below file sizes were cut down by anything between 21% and 93% of their original sizes. Images with less detail receive the biggest cut in file sizes. A 30% reduction is a good expectation for the average conversion to WebP.
Will WebP be served to incompatible browsers?
No. As the ever useful website caniuse.com details, although the web image format has broad compatibility, crucially Apple’s Safari browser has been slow to adopt it, putting them in the same bracket as Internet Explorer. It’s not a good look, Apple!
Update: Since MacOS Big Sur Safari now supports the WebP file format.
But not to worry, this method adds a rule to the website’s htaccess file that makes sure WebP images are only served to browsers that can handle them.
We’ll be using the Litespeed Cache WordPress plugin, the official WordPress caching companion plugin for servers running LiteSpeed. Download and install it now, it’s a pretty banging tool.
- In the plugin settings interface click Show Advanced Options and go to the newly visible Media tab
- Scroll down past the lazy loading toggles (that’s a bonus but the subject of another post), turn on the following toggles then click save:
- Optimise Automatically
- Optimisation Cron
- Optimise Original Images
- Make sure Remove Original Backups is OFF
- Optimise WebP Versions
- Optimise Losslessly
- Image WebP Replacement
- (You may have to also turn on WebP For Extra srcset if you’re using a theme builder like Divi or Elementor, or some funky content injector plugin.)
(Make sure Remove Original Backups is turned OFF unless you’re feeling particularly dangerous)
- Now go to the plugin’s Image Optimisation settings in the WordPress sidebar and click the big Initialise Optimisation button. If you see no complaints you’ve received an API key in the background.
- Click Send Optimisation Request
This will send a batch of up to 100 images to LiteSpeed’s image optimisation server. Give it a couple of minutes to do its thing before refreshing and hopefully you’ll start to see reports of optimised images being successfully pulled back onto your hosting.
How credits work
The process starts gently to make sure both servers talk nicely to each other before establishing a more intimate friendship, and this is managed through credits. Don’t worry though, it’s all completely free.
When enough of the first batch of images have been sent, optimised and pulled back to your host successfully you can click Send Optimisation Request again and each time you’ll be upgraded to another level, allowing you to send more images for optimisation each time.
Automatic chron optimisation requests can only start to be sent when recovered credits have reached 1200 or more. Here’s how many images you can send for processing at each level:
Level 1: 100
Level 2: 500
Level 3: 1500
Level 4: 3000
Level 5: 5000
So early on you’ll probably have to keep an eye on things and send another couple of optimisation requests once each level completes.
Then when the LiteSpeed Cache plugin reports that all your images have been optimised, I suggest purging the LiteSpeed cache to make sure all pages show optimised images as they should.
Then have a cuppa, on me.