Until now, next-gen WebP images could only be served by activating Smush Pro’s CDN. But by popular demand, Smush Pro now also supports local WebP image conversion.

Our CDN is awesome, it really is. However, we’re all for giving people options.

This is exactly why we’ve now made it possible to convert your images to WebP format without needing to use our CDN.

It was also one of Smush Pro’s (and WPMU DEV in general!) most anticipated and requested features of the year.

You told us that…

  • If you were happy with your current CDN provider, you’d prefer not to have to switch to get WebP support.
  • You were also conscious that using Smush Pro’s CDN to serve images uses precious bandwidth – which might not be ideal for larger sites.

So, like any good company who actually listens to their audience, we’ve obliged, and made our award-winning image optimization plugin – even better!

Read on to find out the in’s and out’s of Smush Pro’s game-changing new feature.

Here’s a quick overview if you want to skip to a particular section:

1. Why Convert to WebP?
2. Activating Local WebP on WPMU DEV Hosted Sites
3. Enabling Local WebP Conversion on Third-Party Sites
4. Apache Server Configuration
5. NGINX Server Configuration
6. How to Check Your Image Format.

Why Convert to WebP?

The benefits of WebP images speak for themselves.

WebP image files are much smaller and load faster than JPEGs and PNGs – all while offering no perceptible difference in quality.

The proof is in the pudding – when YouTube switched their thumbnails to WebP, they saw a 10% reduction in load time!

Once you activate the Local WebP feature, Smush Pro will convert your images into the next-gen file type during regular Smushing.

And while not all browsers support WebP (we’re looking at you, Internet Explorer!), you can rest safe in the knowledge that Smush will serve up the JPEG and PNG equivalent to non-supported browsers.

Activating Local WebP on WPMU DEV Hosted Sites

First things first – the latest version of Smush Pro needs to be installed on your site.

Screenshot of the webp announcement page.

Non-CDN WebP support is just a few clicks away!

You can then head into the WebP settings.

Screenshot of the webp activation screen with the getting started buttoin.

Click “Get Started”.

If you host with us, you’ll be lucky enough to be greeted by this message on the next page:

Screenshot of the message that lets you know everything is already set up if you host with WPMU DEV.

If this is the case – you’re all set!

Everything is automatically configured for you, and all that’s left to do is run a Bulk Smush so that your images are converted.

From this page you can also see the supported media types, as well as delete all your WebP images.

Screenshot of the supported media types - png and jpeg.

It’s quick and easy to delete your WebP files if you change your mind.

So let’s get to the nitty gritty – what if your site is not hosted with WPMU DEV?

You have two options.

  1. Switch to one of our awesome (and affordable!) hosting plans.
  2. Follow our step-by-step configuration guide below.

How To Enable WebP Conversion On Non WPMU DEV Hosted Sites

Smush will try to automatically detect the type of server your site uses.

Screenshot of the drop-down where you can choose your server type for configuration.

Smush will try to detect whether your site is running on an Apache/Litespeed or NGINX server.

If the detected type is incorrect, you can change it manually using the dropdown box.

Apache Servers

If your server type is Apache, try the Automatic method first.

Screenshot of the automatic method screen.

Click the Apply Rules button.

This will hopefully add the needed rules to the .htaccess file located in the /wp-content/uploads directory.

If the Automatic method does not work, you can switch to the Manual option and add the displayed rules to your .htaccess file yourself.

Note that the rules must be added to the .htaccess file located in your /wp-content/uploads directory, not the main .htaccess file in the root of your WordPress install. If that file does not yet exist in that directory, you can create it to add the needed rules.

Smush talks you through what you need to do.

Screenshot of the configuration instructions within Smush.

Follow these instructions within Smush to manually configure the settings.

If neither of these methods are successful, you’ll be provided with a list of troubleshooting tips – and of course our 24/7 superhero support team is always on hand if you need extra help.

NGINX Servers

If your server type is NGINX, the required rules must be added manually to your configuration file.

Smush provides clear instructions on how to do this.

Screenshot of the configuration settings for NGINX servers.

Follow the steps within Smush to configure your NGINX server manually.

Just be aware that if your setup is running NGINX as a proxy for Apache, the Apache/Litespeed rules may not work in .htaccess, and you’ll want to add the NGINX rules manually using this method.

How to Check Your Image Format

Unlike the WebP Conversion option in the Smush Pro CDN, you won’t see the “.webp” format appear in source code.

Instead, if you want to verify that images are indeed served as WebP, you’ll want to pop open your browser’s developer tools and, under the Network tab, check the Response Headers for any image.

If you see “content-type: image/webp” there, that tells you that the browser is indeed serving up the WebP version of the image.

Screenshot of the developer tools tab showing proof of the images being webp.

You will be able to see whether images are served as WebP.

Are You Converted?

Hopefully, after reading this article, you’re confident that not only is WebP the right image format for your sites – but Smush Pro is the right plugin for the job.

Just remember that if you want to take full advantage of the full power of Smush, you can always use Smush Pro’s CDN too!

Not a WPMU DEV member? Check out Smush Pro’s 7-day free trial and take the new local WebP feature for a no-risk test drive.

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.