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.

lossy compression comparison

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!

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.

  1. In the plugin settings interface click Show Advanced Options and go to the newly visible Media tab
  2. 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:
    1. Optimise Automatically
    2. Optimisation Cron
    3. Optimise Original Images
    4. Make sure Remove Original Backups is OFF
    5. Optimise WebP Versions
    6. Optimise Losslessly
    7. Image WebP Replacement
    8. (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)
  3. 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.
  4. Click Send Optimisation Request
Litespeed cache image compression settings

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.

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

4 Comments

  1. Elan Shudnow

    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.

    Reply
    • Aidan

      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.

      Reply
  2. alexbeglov1989

    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))

    Reply
    • Aidan

      Hi Alex. Yep, fortunately LiteSpeed Cache only serves WebP images to browsers that support the file format.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.