No eta yet, but I want to try and work on it for 2.3. I haven’t figured out how to rewrite the image urls yet (pretty sure it happens before the actual server rewrite rules kick in). I was trying to go through the code for W3TC to find out how they do it. I’ll stick this thread, and post any updates here.
Thanks man. It’s good to see that you didn’t forget this yet. It will be great if you keep posting the development update here.
Wow! That’s a really nice feature to have.
Thanks to the developer for such an awesome plugin!
This has landed in dev: https://downloads.wordpress.org/plugin/ewww-image-optimizer.zip
Important Notes:
1. Requires PHP’s output buffering to be enabled
2. depends on your theme containing the wp_head and wp_footer hooks (which is considered standard practice)
3. Only filters content in html <body>, does not affect images in css/stylesheets
So what will happen for the files under css or js?
You would have to modify your theme to include the webp alternatives in your css. It’s someone else’s code, that’s why EWWW will not likely ever do it for you. See this page for more information on how to do it: http://www.brucelawson.co.uk/2013/save-bandwidth-webp-with-fallback/
Ditto for any images displayed with js, if it is added dynamically and isn’t just a hidden element. Hidden elements already exist in the html, so EWWW should catch those just fine.
As far as js goes, if it is your own code, it should be easy enough, if it is someone else’s, ask them to add in support for webp detection and fallback: https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_using_javascript
Alternatively, they could detect the webp support in php, and then use the wp_localize_script() function to create a js variable that indicates webp support for their scripts instead of the above method. That’s probably the method I would choose if it was me. It’s been a while since I looked at the php method, but from what I remember, you just check for the header that indicates the browser accepts webp (not sure why js can’t do that, perhaps it can and I just can’t find any information about it).
Is PHP Output buffering can be enabled on shared hosting? Also will be there be issue if we do not change the images inside css/js. So that images inside them will be shown as they are. In that case will that be any issue?
Also I hope this will work fine with w3tc, because most people use it to enable cdn on their site.
Also are you testing it with all major cdn providers?
Also many people use WP Ratina 2x plugin so please test the compatibility with that too.
I think output buffering is on by default, so it should be enabled on shared hosting.
If you make no modifications to css/js, that will be fine, you’ll just get the images the way they are, yes.
W3TC should not cause issues, but I don’t have any CDN accounts, so I cannot test whether or not it conflicts with W3TC. The method I’m using will work with any CDN, but there could be issues if W3TC runs after EWWW instead of before, so there is a potential for problems. Not that it would break anything, it just wouldn’t function as desired. I’ve been trying to figure out how W3TC does the rewriting, but I’ve hit a dead end on that, so that’s why I’m putting it out here for testing.
I don’t remember exactly how the retina plugins do their thing, so I’ll have to refresh my memory to see if this will work ok with that. Again, I don’t use WP Retina 2x normally, so it would be easier for someone that does to just try it and see if it works.
Any eta of releasing this publicly? Also dont forget to test it on lightspeed server as most host use lightspeed now-a-days
Nothing will be released publicly until I hear back from someone that it actually works for them with a CDN.
I’ve been meaning to post more on how it works so that you can see for yourself if it is actually working or not, so here goes:
When the Webp for CDN function is enabled, it creates an output buffer at the end of the html <head> section, and then closes it right before the end of the <body> section. It then does a search through the contents of the <body> section for any img elements, and then modifies their src attribute to include the webp extension. There is then a javascript fallback element appended to the <img> element which contains the original image to be inserted ‘onerror’.
Litespeed should have no bearing on the functionality, since it is a php feature that we are depending on (and not as many people use Litespeed as you think, “most” is definitely not accurate).
If you don’t mind, I would like to try it out on my site. Will you please provide the steps of how to do that? Also if I do that will I be able to receive the actual ewww updates?
I’m on maxcdn and lightspeed server so lets give it a try. Also the javascript you mentioned does that add up site load time? I dont want my page to load slow, thats the main reason to use wep on the 1st place.
Plz let me know how to do it. I mean the steps.
Download it from the link I posted above, then deactivate and delete EWWW. Then you can upload it via the WP plugin installer. It won’t affect updates, because I use version numbers between the current release and the next planned version number to avoid those kinds of issues.
The javascript only takes effect when the webp version can’t be loaded, so there is potentially a slight lag while the browser attempts to load the webp versions. Hmm, that makes me wonder if that doesn’t mean a browser like Firefox would download the webp version AND the other… Stay tuned, I’m going to do some testing on that idea.
Ok, my hunch was right… It DOES download both versions, and that isn’t exactly desirable.
I found something that will work for non-js users, so back to the drawing board…
hi
would you consider adding an option to load webp if browser is chrome/opera, if not, just load jpeg image without re-write rules.
preferably client side negotiation. (server side wont work if using cache or proxy).
i got some info from this article:
http://www.stucox.com/blog/using-webp-with-modernizr/
https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_using_javascript
thank you.
