=== WebP Express === Contributors: rosell.dk Donate link: https://www.bitwise-it.dk/contact Tags: webp, images, performance Requires at least: 4.0 Tested up to: 4.9 Stable tag: 0.6.2 Requires PHP: 5.6 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html Serve autogenerated WebP images instead of jpeg/png to browsers that supports WebP. Works on all images (media library, galleries, theme images, ...). == Description == This plugin let's you take advantage of the WebP image format with only a little effort. Install, configure, test, forget - and enjoy the increased performance of your website. The plugin basically routes jpeg/png images to an image converter, or - if the image converter has already converted the image - directly to a converted image. The approach has the benefit that is works regardless of how an image found its way into your server - be it Media Library, Galleries, or even theme images referenced with CSS. The plugin builds on [WebPConvert](https://github.com/rosell-dk/webp-convert) and its "WebP On Demand" solution described [here](https://github.com/rosell-dk/webp-convert/blob/master/docs/webp-on-demand/webp-on-demand.md) #### Benefits - Much faster load time for images in blink based browsers such as Chrome and Opera (accounting for ~73% of all traffic, according to [caniuse.com](https://caniuse.com/webp)). The converted images are typically *less than half the size* (for jpeg), while maintaining the same quality. Bear in mind that for most web sites, images are responsible for the largest part of the waiting time. - Better user experience (whether performance goes from terrible to bad, or from good to impressive, it is a benefit) - Better ranking in Google searches (performance is taken into account by Google) - Less bandwidth consumption - makes a difference when abroad and in the parts of the world with slow and expensive internet connections. == Installation == 1. Upload the plugin files to the `/wp-content/plugins/webp-express` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the 'Plugins' screen in WordPress 3. Configure it (the plugin doesn't do anything until configured) 4. Verify that it works You configure the plugin in Settings > WebP Express. WebPExpress uses WebPConvert (https://github.com/rosell-dk/webp-convert) to convert images. This is how WebPConvert describes itself: "The current state of WebP conversion in PHP is this: There are several ways to do it, but they all require something of the server setup. What works on one shared host might not work on another. WebPConvert combines these methods by iterating over them (optionally in the desired order) until one of them is successful - or all of them fail." WebPConvert calls these different converting methods "converters". The best converter is cwebp. So the first thing you should do is test whether the cwebp converter is working. Simply click "test" next to the converter. If it doesn't work, you can disable that converter (or try to make it work, by changing the server setup). The next converter to try is wpc, which is equally good as cwebp in terms of quality / filesize ratio, but which is slower. wpc is an open source cloud service, which you will have to install on some other server. It is btw on the roadmap to have this plugin provide the same service. If installing wpc too much work, continue to the next converter. I will not go through all of them here; you can learn more by clicking on the "configure" button on a converter. You can also head to the WebPConvert project for more information. Once, you have a converter, that works, when you click the "test"-button, you are ready to test the whole stack, and the rewrite rules. To do this, first make sure to select something other than "Do not convert any images!" in "Image types to convert". Next, click "Save settings". This will save settings, as well as update the *.htaccess*. If you are working in a browser that supports webp (ie Google Chrome), you will see a link "Convert test image (show debug)" after a successful save. Click that to test if it works. The screen should show a textual report of the conversion process. If it shows an image, it means that the *.htaccess* redirection isn't working. It may be that your server just needs some time. Some servers has set up caching. Note that the plugin does not change any HTML. In the HTML the image src is still set to ie "example.jpg". To verify that the plugin is working (without clicking the test button), do the following: - Open the page in 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" In order to test that the image is not being reconverted every time, look at the Response headers of the image. There should be a "X-WebP-Convert-Status" header. It should say "Serving existing converted image" the first time, but "Serving existing converted image" on subsequent requests (WebP-Express is based upon [WebP Convert](https://github.com/rosell-dk/webp-convert)). You can also append ?debug after any image url, in order to run a conversion, and see the conversion report. Also, you append ?reconvert after an image url, you will force a reconversion of the image. ### 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 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. *Note:* The plugin has not been tested in multisite configurations. It's on the roadmap... == Limitations == * The plugin does not work on Microsoft IIS server * The plugin has not been tested with multisite installation (it is on the roadmap!). * There might be compatability issues with other plugins. For example .htaccess rules from other plugins might interfere. Please report if you discover any problems! == Frequently Asked Questions == = Why do I not see the option to set WebP quality to auto? = The option will only display, if your system is able to detect jpeg qualities. To make your server capable to do that, install *Imagick* or *Gmagick* = How do I make this work with a CDN? = Chances are that the default setting of your CDN is not to forward any headers to your origin server. But the plugin needs the "Accept" header, because this is where the information is whether the browser accepts webp images or not. You will therefore have to make sure to configure your CDN to forward the "Accept" header. The plugin takes care of setting the "Vary" HTTP header to "Accept" when routing WebP images. When the CDN sees this, it knows that the response varies, depending on the "Accept" header. The CDN is thus instructed not to cache the response on URL only, but also on the "Accept" header. This means that it will store an image for every accept header it meets. Luckily, there are not that many variants for images: https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values#Values_for_an_image - so it is not an issue. = How do I donate? = Putting this question in the "frequently" asked questions section is of course some mixture of humour, sarcasm and wishful thinking. In case there really is someone out there wanting to donate, you can simply write to me, and we can arrange. My contact information is available here https://www.bitwise-it.dk/contact. I have paypal and of course an ordinary bank account. == Screenshots == 1. WebP Express settings == Changelog == = 0.6.0 = This version added option for setting caching header, fixed a serious issue with *Imagick*, added a new converter, *Gmagick*, added a great deal of options to *Cwebp* and generally improved the interface. * Added option for caching * Fixed long standing and serious issue with Imagick converter. It no longer generates webp images in poor quality * Added gmagick as a new conversion method * WebPExpress now runs on newly released WebP-Convert 1.2.0 * Added many new options for *cwebp* * You can now quickly see converter status by hovering over a converter * You can now choose between having quality auto-detected or not (if the server supports detecting quality). * If the server does not support detecting quality, the WPC converter will display a quality "auto" option * Added special intro message for those who has no working conversion methods * Added help texts for options * Settings are now saved, when changing converter options. Too many times, I found myself forgetting to save... For more info, see the closed issues on the 0.6.0 milestone on our github repository: https://github.com/rosell-dk/webp-express/issues?q=is%3Aclosed+milestone%3A0.6.0 == Upgrade Notice == = 0.6.0 = Adding caching option, fixed imagick converter, added gmagick converter and more! == Roadmap == * Share converter with other sites. Optionally provide conversion service for other sites, which will be able to connect to it using the "wpc" converter. * Support multisite setups