WordPress WebP images, with Bedrock and Nginx

In this short guide i will help you to leverage WordPress WebP images the easiest way possible. Important for user experience as well as SEO.

1. So WebP images, what is it, and why should one use it?
2. Why should you care?
3. How to get going with WordPress WebP images
4. Config for Nginx only
5. Config for Nginx and Bedrock

So WebP images, what is it, and why should one use it?

WebP is an image format made by Google a couple of years ago. It’s made with one purpose in mind, to leverage images in the same quality as we’re used to with other web formats, but at a smaller footprint. According to Google it can make your images up to almost 35% smaller.

WebP is actually supported by most modern browsers. As you see in the screenshot from Can I Use above. And as we will convert our images on the fly, you can continue uploading your JPEGs and PNGs as usual. The plugin we will use will know when a supported browser hit the page, and convert images to WebP.

Why should you care?

By saving up to almost 35% in file size over JPEG or PNG you can make your page faster. A faster page is good if you want your users to be thriving. But it also makes Google Page Speed Insights happy. This is extra important if you want to rank high in Googles searches. As seen below, where I measured a page containing a few images, it really makes a difference. 1,65 seconds may not sound like much, but since users get used to faster pages it actually means a lot.

How to get going with WordPress WebP images

In my struggle finding a workflow for converting WordPress images to WebP I finally found a plugin that works (after some struggling in Nginx). The plugin I use is called WebP Express, and if you’re on an apache web server should should be good to go by just installing and activating this plugin.

Config for Nginx only

However, since I’m on Nginx, not Apache there is a little bit of configuration involved. If you’re on Nginx, with a standard WordPress installation. The plugin FAQ tells you to add this rule in your Nginx config:

if ($http_accept ~* “webp”){
    rewrite ^/(.*).(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?wp-content=wp-content break;
}

and if that doesn’t work they suggest you try this instead:

if ($http_accept ~* “webp”){
    rewrite ^/(.*).(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break;
}

Config for Nginx and Bedrock

This might be the case, I got it to work with the first bit of code when I tried it on a normal WordPress install. But since I’m using Bedrock (which i recommend), these lines of code wont work. This is because the folder structure is somewhat different. WordPress is located in web/wp, and plugins live in web/app/plugins.

So, with that in mind, here’s the code you need in your Nginx config when using WebP Express with Bedrock:

if ($http_accept ~* "webp"){
    rewrite ^/(.*).(jpe?g|png)$ /app/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=app break;
}

After you’ve put this in your Nginx config, be sure to restart Nginx. Then to check if it’s working, head over to your front end and open dev tools. In dev tools click on the tab “Network” and reload the page. After that, click on the “Img” filter, and check that your JPEGs or PNGs gets delivered as WebP.

That’s about it. I hope this helped you to leverage WebP, if it wont work, or if something is still unclear, just hit me up in the comments section below.