Nginx Webp Not Working – Make Extension .webp for CDN?

I’ve actually got the images to show with Webp active now, and the Green Webp is showing in settings. But when I save files from Chrome they are the exact same file sizes that I save when saving from Firefox. So still thinking Webp is not working.

If you have a CDN, you must NOT use nginx rewrites to serve WebP. The two methods available that work with CDNs are the Alternative WebP option in EWWW, and the WebP option from the Cache Enabler plugin by KeyCDN (if you don’t already have a cache plugin you love).

Thanks for the feedback. I went in, activated jpg/png to Webp and activated “Alternative WebP Rewriting”. But still not seeing any difference in images served to Chrome. Same as what’s served to Firefox.

And you disabled all your nginx stuff? It should be significantly different in the source code. Can you post a link to a sample page that you’re checking?

https://www.traileraddict.com/article/

I have all nginx rules removed and server reset.

Perfect, that’s what I was needing to see. So there are a couple things going on there.
It is working, but there are some exceptions that cannot be handled very well by EWWW (the Cache Enabler might fare better, but if you already have one you like, setting up a new cache plugin may not be worthwhile):

1. The top sliders are displayed as background images. EWWW cannot do anything with these, as the fallback method we use doesn’t work with CSS directives.
2. If the .webp file isn’t smaller, EWWW doesn’t keep it. Thus, some of the other images are unchaged, while several ARE properly replaced by .webp alternatives.

The easiest way to check is to open the Chrome developer’s console, hit the Network tab, select Images, and then refresh the page. You’ll see all the images loaded, which includes several .webp images in the mix.

You are right, I see it listed as alternate dataset in source code.

One question.

My chrome is choosing to use this image here:

https://www.traileraddict.com/article/jared-leto-added-to-blade-runner-sequel-cast/

https://www.traileraddict.com/article/wp-content/uploads/2016/08/Blade-Runner-Landscape-Film.jpg

data-img=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/Blade-Runner-Landscape-Film.jpg” data-webp=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/Blade-Runner-Landscape-Film.jpg.webp”

When I look at the webp it’s half the size of jpeg, but Chrome is sticking with the jpeg for use. When watching the network, I see requested:

https://www.traileraddict.com/article/wp-content/uploads/2016/08/Blade-Runner-Landscape-Film.jpg

Why is chrome ignoring the webp?

Hmm, that is very strange, I’m getting the .webp version when I load it… From what you describe, it seems to be working right, but it’s possible that something is blocking inline scripts, which might make it fall back to the data-img file. I don’t think caching would cause such an issue, but might not hurt to clear your site cache to be sure. Also, I always check the box for the Chrome Dev Console to Ignore Cache.

Yeah, ignoring cache. let me see if it’s because of Cherry Lazyload, which is surrounding that image.

I removed the LazyLoad and it still loads the jpg instead of webp. Here is code on page when inspected:

<p><noscript data-img=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg&#8221; data-webp=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg.webp&#8221; data-srcset-webp=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg.webp 1280w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-300×169.jpg.webp 300w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-768×432.jpg.webp 768w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-1024×576.jpg.webp 1024w” data-srcset-img=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg 1280w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-300×169.jpg 300w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-768×432.jpg 768w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-1024×576.jpg 1024w” data-alt=”Daniel Radcliffe Pensive” data-height=”720″ data-width=”1280″ data-class=”alignnone size-full wp-image-2153″ data-sizes=”(max-width: 1280px) 100vw, 1280px” class=””><img class=”alignnone size-full wp-image-2153″ src=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg&#8221; alt=”Daniel Radcliffe Pensive” width=”1280″ height=”720″ srcset=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg 1280w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-300×169.jpg 300w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-768×432.jpg 768w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-1024×576.jpg 1024w” sizes=”(max-width: 1280px) 100vw, 1280px”></noscript><img src=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg&#8221; srcset=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive.jpg 1280w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-300×169.jpg 300w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-768×432.jpg 768w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-1024×576.jpg 1024w” alt=”Daniel Radcliffe Pensive” height=”720″ width=”1280″ class=”alignnone size-full wp-image-2153″ sizes=”(max-width: 1280px) 100vw, 1280px”></p>

It looks like the finally image output at the end is jpg and jpg alternate sizes.

Hmm, so the js is definitely running, the page is being parsed correctly, and the webp file is found. Just to clarify, if the webp file isn’t smaller, it’s deleted right after optimization. So the fact that it inserts the .webp file into the code already means it IS smaller.

What it seems like is that your browser is somehow failing the webp js test. Before it does anything else, the inline js checks to see if your browser can load a sample (inline) webp file. If that fails, it creates the new <img> elements with the .jpg instead of the .webp.

What happens when you view this file in your browser: https://www.traileraddict.com/article/wp-content/uploads/2016/08/daniel-radcliffe-pensive-300×169.jpg.webp

In chrome it loads a small image of Radcliffe in the browser. In firefox it requests saving it.

Ahh! you know what was breaking it?

In Chrome I was logged into wordpress, so the admin bar was appearing on top of the page. For some reason the admin bar was breaking the javascript and causing the webp to fail. Once I logged out of WordPress in chrome and reloaded hte pages, webp started being called.

Weird conflict with admin bar and JS on site.

Cheers!
Ryan

Thanks for all the help on this, btw