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.
LiteSpeed Cache
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.
Hi, just out of curiosity, why did you decide to choose Optimise Losslessly? You would think you would want to have this off so your images are lossy and smaller in size for better optimization.
It’s a balance between small file sizes and decent image quality. I already compress images in Photoshop before uploading them to my website where they’re further compressed, so wouldn’t want to drop their quality much more. With “lossless” compression my WebP images do still suffer a slight loss of quality but are on average 50% smaller.
WebP has such a nuance – not all browsers support it. For example, iOS Safari, regular Safari, IE – do not support WebP. https://caniuse.com/#feat=webp Therefore, you must always store at least two versions of each image. Webp (for WebP-enabled browsers) and original image. And give the right version depending on the browser. And the original image must also be optimized/compressed – so that even for browsers without WebP support, images will be optimized (lighter in weight) – this is the third! version of the file.. At the optipic service, I recently noticed a new functionality in which all of this is already in the box. https://optipic.io/en/cdn/ You can even connect everything so that the urls of the images do not change (they remain exactly the same and look like internal urls on my site). But in fact, they are loaded through their system with automatic compression, conversion to webp and recognition of webp support. It turns out that everything is simple and beautiful, and inexpensive))
Hi Alex. Yep, fortunately LiteSpeed Cache only serves WebP images to browsers that support the file format.
When I check my site in this tool:
https://check.lscache.io/?host=https%3A%2F%2Fvutruso.com%2F
LSCache is not supported.
I really install Litespeed and Litespeed cache plugin and config correctly. But I got the above message.
How to fix it. Thank you so much.
The HTTP header reported by that scanning tool is 403, which means the connection has been blocked by your website’s server. That’s probably why the tool couldn’t detect LiteSpeed. When I enter the site into builtwith.com it reports your hosting is running LiteSpeed, so it looks like you’re OK.
Thank you very much.
I will contact the host provider and ask for support
I’m facing the same problem. my server is litespeed. not apache. how to fix this say? check my site tech and tour . if changes happen.i’ll let you know
What problem are you facing?
I did everything according to your blog. but, how to know that my site serves on webp images.
After clearing the cache and checking WebP versions of images have been downloaded in the Media Library (list view rather than grid view), visit a page of your website using a browser that can load WebP, like Chrome or Firefox. Then right-click an image on the page and save or open it in a new tab, and check the file type is WebP.