It already does that for non-CDN users. The difficulty now is getting it to work with CDNs (the proxy you speak of). If you control your own proxy, there is no problem serving webp from the proxy.
The solution I’m working on for CDN users will serve the appropriate images to the appropriate browsers via client-side javascript, and the detection is done via the browser headers. While Google’s method would work, all the webp supporting browsers now specify that support in their headers, so it isn’t necessary to actually decode an image first (at least I don’t think so, but we’ll find out over the long haul).
great,,,
can wait for this..
it will be the real first solution for WordPress Webp support…
thanks for your efforts.
Ok, making some progress on this. I’ve finally figured out my javascript issues. Now to write a really awesome regex that will pull all the image attributes for all images on a page…
I’m really glad to know that you are actually putting this feature into the mainstream 🙂
Ok, just checked the changes in to the WP repository. The link for downloading the dev version is https://downloads.wordpress.org/plugin/ewww-image-optimizer.zip
Here’s an updated synopsis of what is going on (since the previous method didn’t work right. It uses the method that xbaha mentioned earlier from http://www.stucox.com/blog/using-webp-with-modernizr/
Essentially, every image gets wrapped in a noscript tag, which means non-js users will never see webp versions. We COULD change that, but it would break any caching plugins, which is not worth it for the minimal amount of folks that turn off javascript.
Anyway, the noscript tag receives a copy of all the attributes from the image, using data-* attributes. The plugin also detects webp support, and includes a javascript variable (which could be used by other developers if they wish). Once the page is loaded, the javascript kicks in. A new image element is created directly following the noscript element with the appropriate src attribute for the browser (webp vs. jpg/png).
I’ve tested it with Meta Slider from behind Cloudflare’s CDN and it seems to be working quite well.
If I can get another confirmation or two, I’ll start looking at a release date within the next couple weeks.
I’ve just found (and fixed) a glitch with utf8 encoding of special characters (particularly those generated by MS Word). Download a fresh copy from the dev link if you’re noticing odd characters in your text.
how do i test it?
i downloaded the plugin, still my images are jpeg??
You need to turn on the rewriting via an option on the Conversion tab
Grab a fresh copy at https://downloads.wordpress.org/plugin/ewww-image-optimizer.zip
The last iteration had a bug where there were duplicate <html>, <head>, </body>, and </html> tags. I’ve moved the action hooks, and ensured that duplicate tags are not rendered anymore.
In addition to turning on the Alternate WebP Rewriting, you of course also need to have webp versions of your images created. If you are just now turning on the webp conversion, you’ll need to re-optimize everything with the Force checkbox checked.
Hi man, I’m glad to see that the webp cdn integration is coming to the mainstream of this awesome plugin. But there is one problem which I’m (and may be many other) will be facing with this.
You see ewww doesn’t generally use htaccess for the normal plugin and only use it for the webp implementation. But the htaccess code has been written for apache server, but many people now-a-days uses nginx server where htaccess doesn’t work and it has its own vhost code.
So it would be great if you share the nginx version of the htaccess code for the webp implementation.
Not a bad idea, wonder if it’s possible to detect the webserver so that we can display the appropriate configs.
An update on the CDN support, which I’m now calling Alternative WebP Rewriting:
There was a serious performance issue with the last bugfix that I’ve resolved, and I’ve nearly implemented full NextGEN support for webp as well. Grab a fresh copy here: https://downloads.wordpress.org/plugin/ewww-image-optimizer.zip
We’re still 1-2 weeks out from a release date, as I’ve got a few other things to cleanup before I’m ready, and I haven’t heard from anyone that it actually works for them (I know it works for a couple sites I run, but I’d like some more feedback).
I hope this link will help you http://serverfault.com/questions/164130/how-to-detect-in-php-if-it-is-running-on-apache-nginx-or-some-other-webserver
Though Iven’t used it on any of my personal project. But the nginx thing is really needed. Infact I personally is thinking to shift to nginx server too.
Looking forward to seeing how this develops… no pun intended. 🙂
I tried this feature on my website, and I noticed that there are some potentially major issues:
- I use Wordfence for page caching. The cached pages still try to load the webp version in unsupported browsers.
- There is an annoying flash and page reflow caused by the images not being loaded immediately.
I suggest that you use client-side JavaScript feature detection and immediately replace the images using a minified inline script, rather than loading a separate file and waiting until the document has loaded. I also see that the JavaScript in load_webp.js could be optimized a bit. This should fix the page caching issue and help with the flash.
To avoid the annoying page reflow, I suggest adding a temporary style to the replaced image that sets the height and width correctly.
