WebP Express

1. 01Upload the plugin files to the /wp-content/plugins/webp-express directory, or install the plugin through the WordPress plugins screen directly.
2. 02Activate the plugin through the ‘Plugins’ screen in WordPress
3. 03Configure it (the plugin doesn’t do anything until configured)
4. 04Verify that it works
5. 05(Optional) Bulk convert all images, either in the admin ui or using WP CLI (command: “webp-express”)

Configuring

You configure the plugin in Settings > WebP Express .

Operation modes

As sort of a main switch, you can choose between the following modes of operation:

Varied image responses : WebP Express creates redirection rules for images, such that a request for a jpeg will result in a webp – but only if the request comes from a webp-enabled browser. If a webp already exists, it is served immediately. Otherwise it is converted and then served. Note that not all CDN’s handles varied responses well.

CDN friendly : In “CDN friendly” mode, a jpeg is always served as a jpeg. Instead of varying the image response, WebP Express alters the HTML for webp usage.

Just redirect : In “just redirect” mode, WebP Express is used just for redirecting jpeg and pngs to existing webp images in the same folder. So in this mode, WebP express will not do any converting. It may be that you use another plugin for that, or that you converted the images off-line and uploaded them manually.

Tweaked : Here you have all options available.

Conversion methods

WebP Express has a bunch of methods available for converting images: Executing cwebp binary, Gd extension, Imagick extension, ewww cloud converter and remote WebP express. Each requires something . In many cases, one of the conversion methods will be available. You can quickly identify which converters are working – there is a green icon next to them. Hovering conversion methods that are not working will show you what is wrong.

In case no conversion methods are working out of the box, you have several options: – You can install this plugin on another website, which supports a local conversion method and connect to that using the “Remote WebP Express” conversion method – You can purchase a key for the ewww cloud converter. They do not charge credits for webp conversions, so all you ever have to pay is the one dollar start-up fee 🙂 – You can set up webp-convert-cloud-service on another server and connect to that. Its open source. – You can try to meet the server requirements of cwebp, gd, imagick or gmagick. Check out this wiki page on how to do that

Quality detection of jpegs

If your server has Imagick extension or is able to execute imagemagick binary, the plugin will be able to detect the quality of a jpeg, and use that quality for the converted webp. You can tell if the quality detection is available by hovering the help icon in Conversion > Jpeg options > Quality for lossy. The last line in that help text tells you.

This auto quality has benefits over fixed quality as it ensures that each conversion are converted with an appropriate quality. Encoding low quality jpegs to high quality webps does not magically increase the visual quality so that your webp looks better than the original. But it does result in a much larger filesize than if the jpeg where converting to a webp with the same quality setting as the original.

If you do not have quality detection working, you can try one of the following: – Install Imagick on the server (for this purpose, it is not required that it is compiled with WebP support) – Install imagemagick on the server and grant permission for PHP to use the “exec” function. – Use “Remote WebP Express” converter to connect to a site, that does have quality detection working – If you have cwebp converter available, you can configure it to aim for a certain reduction, rather than using the quality parameter. Set this to for example 50%, or even 45%.

Verifying that it works (in “Varied image responses” mode)

1. 06Make sure at least one of the conversion methods are working. It should have a green checkmark next to it.
2. 07If you haven’t saved yet, click “Save settings”. This will put redirection rules into .htaccess files in the relevant directories (typically in uploads, themes and wp-content/webp-express/webp-images, depending on the “Scope” setting)
3. 08I assume that you checked at least one of the two first checkboxes in the .htaccess rules section. Otherwise you aren’t using “varied responses”, and then the “CDN friendly” mode will be more appropriate.
4. 09Click the “Live test” buttons to see that the enabled rules actually are working. If they are not, it could be that the server needs a little time to recognize the changed rules.

The live tests are quite thorough and I recommend them over a manual test. However, it doesn’t hurt to do a manual inspection too.

Doing a manual inspection

Note that when WebP Express is serving varied image responses, the image URLs still points to the jpg/png . If the URL is visited using a browser that supports webp, however, the response will be a webp image. So there is a mismatch between the file extension (the filename ends with “jpg” or “png”) and the file type. But luckily, the browser does not rely on the extension to determine the file type, it only looks at the Content-Type response header.

To verify that the plugin is working (without clicking the test button), do the following:

1. 10Open the page in a browser that supports webp, ie Google Chrome
2. 11Right-click the page and choose “Inspect”
3. 12Click the “Network” tab
4. 13Reload the page
5. 14Find a jpeg or png image in the list. In the “type” column, it should say “webp”

You can also look at the headers. When WebP Express has redirected to an existing webp, there will be a “X-WebP-Express” header with the following value: “Redirected directly to existing webp”. If there isn’t (and you have checked “Enable redirection to converter”), you should see a “WebP-Convert-Log” header (WebP-Express uses the WebP Convert for conversions).

Notes

Note: The redirect rules created in .htaccess are pointing to a PHP script. If you happen to change the url path of your plugins, the rules will have to be updated. The .htaccess also passes the path to wp-content (relative to document root) to the script, so the script knows where to find its configuration and where to store converted images. So again, if you move the wp-content folder, or perhaps moves WordPress to a subfolder, the rules will have to be updated. As moving these things around is a rare situation, WebP Express are not using any resources monitoring this. However, it will do the check when you visit the settings page.

Note: Do not simply remove the plugin without deactivating it first. Deactivation takes care of removing the rules in the .htaccess file. With the rules there, but converter gone, your Google Chrome visitors will not see any jpeg images.

Bulk convert

You can start a bulk conversion two ways: 1. In the admin UI. On the settings screen, there is a “Bulk Convert” button 2. By using WP CLI (command: “webp-express”).

I’m currently working on a file manager interface, which will become a third way.

Making sure new images becomes converted

There are several ways: 1. Enable redirection to converter in the .htaccess rules section. 2. Enable “Convert on upload”. Note that this may impact upload experience in themes which defines many formats. 3. Set up a cron job, which executes wp webp-express convert regularily

WP CLI command

WebP Express currently supports commands for converting and flushing webp images throug the CLI. You can use the –help option to learn about the options: wp webp-express –help . Displays the available commands wp webp-express convert –help . Displays the available options for the “convert” command.

A few examples: wp webp-express convert : Creates webp images for all unconverted images wp webp-express convert –reconvert : Also convert images that are already converted wp webp-express convert themes : Only images in the themes folder wp webp-express convert uploads/2021 : Only images in the “2021” folder inside the uploads folder wp webp-express convert –only-png : Only the PNG images wp webp-express convert –quality=50 : Use quality 50 (instead of what was entered in settings screen) wp webp-express convert –converter=cwebp : Specifically use cwebp converter.

wp webp-express flushwebp : Remove all webp images wp webp-express flushwebp –only-png : Remove all webp images that are conversions of PNG images

Synopsises:

wp webp-express convert [<location>] [--reconvert] [--only-png] [--only-jpeg] [--quality=<number>] [--near-lossless=<number>] [--alpha-quality=<number>] [--encoding=<auto|lossy|lossless>] [--converter=<converter>] wp webp-express flushwebp [--only-png]

I’m considering adding commands for viewing status, viewing conversion stats, generating the .htaccess files and modifying the settings. Please let me know if you need any of these or perhaps something else.

How do I verify that the plugin is working?

Verifying that the plugin works in “Varied image responses” mode 1. Make sure at least one of the conversion methods are working. It should have a green checkmark next to it. 2. If you haven’t saved yet, click “Save settings”. This will put redirection rules into .htaccess files in the relevant directories (typically in uploads, themes and wp-content/webp-express/webp-images, depending on the “Scope” setting) 3. I assume that you checked at least one of the checkboxes in the .htaccess rules section – otherwise you might as well change to “CDN friendly” mode. The first 4. Click the “Live test” buttons to see that the enabled rules actually are working. If they are not, it could be that the server needs a little time to recognize the changed rules.

The live tests are quite thorough and I recommend them over a manual test. However, it doesn’t hurt to do a manual inspection too.

Doing a manual inspection

Note that when WebP Express is serving varied image responses, the image URLs still points to the jpg/png . If the URL is visited using a browser that supports webp, however, the response will be a webp image. So there is a mismatch between the file extension (the filename ends with “jpg” or “png”) and the file type. But luckily, the browser does not rely on the extension to determine the file type, it only looks at the Content-Type response header.

To verify that the plugin is working (without clicking the test button), do the following:

• Open the page in a browser that supports webp, ie Google Chrome
• Right-click the page and choose “Inspect”
• Click the “Network” tab
• Reload the page
• Find a jpeg or png image in the list. In the “type” column, it should say “webp”

You can also look at the headers. When WebP Express has redirected to an existing webp, there will be a “X-WebP-Express” header with the following value: “Redirected directly to existing webp”. If there isn’t (and you have checked “Enable redirection to converter”), you should see a “WebP-Convert-Log” header (WebP-Express uses the WebP Convert for conversions).

No conversions methods are working out of the box

Don’t fret – you have options!

• If you a controlling another WordPress site (where the local conversion methods DO work), you can set up WebP Express there, and then connect to it by configuring the “Remote WebP Express” conversion method.
• You can also setup the ewww conversion method. To use it, you need to purchase an api key. They do not charge credits for webp conversions, so all you ever have to pay is the one dollar start-up fee 🙂 (unless they change their pricing – I have no control over that). You can buy an api key here: https://ewww.io/plans/
• I have written a template letter which you can send to your webhost
• You can try to get one of the local converters working. Check out this page on the webp-convert wiki. There is also this test/troubleshooting script which is handy when messing around with this.
• Finally, if you have access to another server and are comfortable with installing projects with composer, you can install webp-convert-cloud-service . It’s open source.

Of course, there is also the option of using another plugin altogether. I can recommend Optimole. If you want to try that out and want to support me in the process, follow this link . It is an affiliate link and will give me a reward in case you decide to sign up.

It doesn’t work – Although test conversions work, it still serves jpeg images

Actually, you might be mistaking, so first, make sure that you didn’t make the very common mistake of thinking that something with the URL example.com/image.jpg must be a jpeg image. The plugin serves webp images on same URL as the original (unconverted) images, so do not let appearances fool you! Confused? See next FAQ item.

Assuming that you have inspected the content type header, and it doesn’t show “image/webp”, please make sure that: 1) You tested with a browser that supports webp (such as Chrome) 2) The image URL you are looking at are not pointing to another server (such as gravatar.com)

Assuming that all above is in place, please look at the response headers to see if there is a X-WebP-Convert-Status header. If there isn’t, well, then it seems that the problem is that the image request isn’t handed over to WebP Express. Reasons for that can be:

• You are on NGINX (or an Apache/Nginx combination). NGINX requires special attention, please look at that FAQ item
• You are on WAMP. Please look at that FAQ item

I shall write more on this FAQ item… Stay tuned.

How can a webp image be served on an URL ending with “jpg”?

Easy enough. Browsers looks at the content type header rather than the URL to determine what it is that it gets. So, although it can be confusing that the resource at example.com/image.jpg is a webp image, rest assured that the browsers are not confused. To determine if the plugin is working, you must therefore examine the content type response header rather than the URL. See the “How do I verify that the plugin is working?” Faq item.

I am btw considering making an option to have the plugin redirect to the webp instead of serving immediately. That would remove the apparent mismatch between file extension and content type header. However, the cost of doing that will be an extra request for each image, which means extra time and worse performance. I believe you’d be ill advised to use that option, so I guess I will not implement it. But perhaps you have good reasons to use it? If you do, please let me know!

WP CLI, but how do I use it to bulk convert?

Well, first, if you don’t know WP CLI, here is a quick start

WebP Express currently supports commands for converting and flushing webp images throug the CLI. You can use the –help option to learn about the options: wp webp-express –help . Displays the available commands wp webp-express convert –help . Displays the available options for the “convert” command.

A few examples: wp webp-express convert : Creates webp images for all unconverted images wp webp-express convert –reconvert : Also convert images that are already converted wp webp-express convert themes : Only images in the themes folder wp webp-express convert uploads/2021 : Only images in the “2021” folder inside the uploads folder wp webp-express convert –only-png : Only the PNG images wp webp-express convert –quality=50 : Use quality 50 (instead of what was entered in settings screen) wp webp-express convert –quality=50 –near-lossless=50 –alpha-quality=50 –encoding=lossy : More conversion options. encoding can be “lossy”, “lossless” or “auto” wp webp-express convert –converter=cwebp : Specifically use cwebp converter. Other options: “vips”, “imagemagick”, “ffmpeg”. PS: For “ewww” and “wpc” (remote webp express) does not work here.

wp webp-express flushwebp : Remove all webp images wp webp-express flushwebp –only-png : Remove all webp images that are conversions of PNG images

Synopsises:

wp webp-express convert [<location>] [--reconvert] [--only-png] [--only-jpeg] [--quality=<number>] [--near-lossless=<number>] [--alpha-quality=<number>] [--encoding=<auto|lossy|lossless>] [--converter=<converter>] wp webp-express flushwebp [--only-png]

I’m considering adding commands for viewing status, viewing conversion stats, generating the .htaccess files and modifying the settings. Please let me know if you need any of these or perhaps something else.

Blank images in Safari?

WebP Express has three ways of distributing webp to webp-enabled browsers while still sending the originals to webp-disabled browsers. While method 1 can be combined with any of the other methods, you would usually just pick method 1 or one of the others if method 1 cannot be used for you.

Can some of these go wrong? Yes. All!

Method 1: Varied image responses The “Varied image responses” method adds rules to the .htaccess which redirects jpegs and pngs to the corresponding webps (if they exist). The rules have a condition that makes sure they only trigger for browsers supports webp images (this is established by examining the “accept” header).

I the method “varied image responses” because the response on a given image URL varies (the webp is served on the same URL as the jpeg/png).

In the cases where method 1 fails, it is due to systems that cache images by the URL alone. To prevent this from happening, the .htaccess rules adds a Vary:Accept response header. However, most CDNs does not respect that header unless they are configured to do so. Fortunately proxy servers respects it nicely (however often by throwing out the cached image if the accept header doesn’t match)

Method 1 can go wrong if:

1. 01You are using a CDN and it hasn’t been set up to handle varied image responses. If this has happened, it is critical that you purge the CDN cache! For information regarding CDN setups, check out the CDN section in this FAQ
2. 02Your server doesn’t support adding response headers in .htaccess . On Apache, the “mod_headers” module needs to be enabled. Otherwise the all important Vary:Accept response header will not be set on the response.
3. 03Your server doesn’t support SetEnv. However, that module is fortunately very common. I have posted a possible solution to make the rules work without SetEnv here .
4. 04You are on Nginx and you haven’t created rules that adds the Vary:Accept header.

I do not believe it can go wrong in other ways. To be certain, please check out this test page . When visiting the test-page with Safari, you should see two images with the “JPG” label over them. When visiting the test-page with a browser that supports webp, you should see two images with the “WEBP” label over them. If you do not see one of these things, please report! (no-one has yet experienced that)

Since WebP Express 0.15.0 you can use the “Live test” button to check that browsers not supporting webp gets the original files and that the Vary:Accept header is returned. Note however that it may not detect CDN caching problems if the CDN doesn’t cache a new image immediately – and across all its nodes.

Met