How to Use WebP Images With Modern Browsers

Using WebP images instead of PNG, JPG and GIF images is a great way to speed up your website. Oh, and Google loves Webp, too. There are several ways you can implement WebP images on your website, but I’m going to focus on the easiest way for WordPress sites.

WordPress has a multitude of plugins to help with this challenge. Some are free, but I’d avoid these as the premium offerings are great and the cost is a small trade-off for implementing WebP without having to reinvent the wheel.

My Favourite WordPress Plugin for WebP Images.

I’ve done a ton of research and testing to find a decent plugin for this job and, after much trial and error, the I’ve happily settled with Imagify, by WP Rocket.

Note that this plugin has a free tier that you can use to test the water, in fact, for many sites this option might well be all that’s needed! However, should you need to swing over to a paid tier, then you’re not going to lose any sleep, as 1GB of data per month (about 10k images) will set you back the cost of a coffee or two.

Picture Element or Rewrites?

Having tried both approaches I found rewrites better, as using the picture element didn’t address background images. Plus rewrites meant the codebase didn’t need to change, which could be a problem if you’re using this on a theme you don’t have control over, such as an off-the-shelf theme.

Apache or Nginx?

If you’re using Apache, you can install the plugin and you’re good to go, as the .htaccess file will be updated to handle the rewrites. However, if, like me, you’re using Nginx, you’ll need to edit the config file manually. Just add the following to nginx.config:

location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
    add_header Vary Accept;

    if ($http_accept ~* "webp"){
        set $imwebp A;
    }
    if (-f $request_filename.webp) {
        set $imwebp  "${imwebp}B";
    }
    if ($imwebp = AB) {
        rewrite ^(.*) $1.webp;
    }
}

source: https://imagify.io/documentation/my-images-are-broken/
With the rewrites in place, all that’s left is to run the bulk optimisation on the media library (or your other directories!) and clear any caches.

Don’t just serve WebP, optimise your images, too!

Oh, it’s also worth mentioning that most decent image optimisation plugins also include WebP handling, so you’re not just getting modern file types, you’ll also get squished and squeezed assets, too. So even those browsers that don’t support WebP can still server compressed images, even if they’re a little behind the curve.

Need help or advice on image optimisation?

If you’d like to implement WebP but you’re encountering challenges, please get in touch and we’ll be happy to see if we can help.