WebP doesn’t work with Jetpack Carousel

Yes, on my main web site, and in the 2 test sites. For example:

<div data-carousel-extra='{"blog_id":1,"permalink":"https:\/\/www.8bites.net\/?p=17"}' id="gallery-3" class="gallery galleryid-17 gallery-columns-3 gallery-size-large">
<figure class="gallery-item"><div class="gallery-icon portrait">
				<a href="https://www.8bites.net/?attachment_id=18"><noscript data-img="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg" data-webp="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg.webp" data-srcset-webp="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg.webp 736w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-216x300.jpg.webp 216w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-768x1068.jpg.webp 768w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01.jpg.webp 863w" data-srcset-img="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg 736w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-216x300.jpg 216w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-768x1068.jpg 768w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01.jpg 863w" data-height="918" data-width="660" data-class="attachment-large size-large" data-sizes="(max-width: 660px) 100vw, 660px" class="ewww_webp"><img width="660" height="918" src="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg" class="attachment-large size-large" alt="" srcset="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg 736w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-216x300.jpg 216w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-768x1068.jpg 768w, https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01.jpg 863w" sizes="(max-width: 660px) 100vw, 660px" data-attachment-id="18" data-permalink="https://www.8bites.net/?attachment_id=18" <strong>data-orig-file</strong>="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01.jpg" data-orig-size="863,1200" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="1704-13 amiibo Bayonetta 01" data-image-description="" <strong>data-medium-file</strong><strong>="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-216x300.jpg" <strong>data-large-file</strong>="https://www.8bites.net/wp-content/uploads/2017/04/1704-13-amiibo-Bayonetta-01-736x1024.jpg"></noscript></a>

Hi there! I work on the Jetpack plugin, and I thought I’d jump in and see if I can help. I can’t comment on the other thread you created here since it’s closed, but I’ll try to help here.

jetpack-carousel.js:1063 Uncaught TypeError: Cannot read property ‘split’ of undefined

This seems to be the source of the problem. This error most likely happens because EWWW Image Optimizer changes the img attributes and removes the data-orig-size attribute. I’ll let @nosilver4u confirm since he seems to have found the source of the problem already ??

Nevermind, I did some testing, and it seems those three attributes ARE always present with the carousel, even if the image is rather small.

That’s correct; Carousel adds the attributes to the image tags so it can use them to create the Carousel overlay.

the Auttomatic AMP plugin changes all the img elements to be amp-img elements

Yes indeed. That’s a requirement from the AMP specification:
https://www.ampproject.org/docs/reference/spec#html-tags
https://www.ampproject.org/docs/reference/components/amp-img

I’ve looked at the Photon (server-side) source code recently, and it appears to have webp support, although I don’t know that they’ve enabled it yet. So if you want to use Photon, I would just wait for them to introduce WebP support.

Photon does indeed support webP; it was enabled for all Jetpack users a couple of years ago:
https://developer.wordpress.com/2015/06/25/photon-webp-image-support/

Thanks Jeremy, that helps quite a bit. I have EWWW’s Alt Webp + Jetpack’s Carousel working properly in dev, so that’s all sorted.

The AMP stuff is what still puzzles me. What EWWW does is to use PHP’s built-in parser (libxml), which does not handle broken xml/html well. When it encounters such a thing, it tries to fix it, which sometimes works, and sometimes ends up with really odd results.

I’m testing with the TwentySeventeen theme, which likely has solid code, and I’ve had no issues with AMP + EWWW’s Alt WebP.
So my suspicion is that the few reports I’ve had were from themes that had “sketchy” html OR it has code that the AMP plugin doesn’t handle as well. Once the theme generates the page, AMP comes in, rewrites the page, and then EWWW gets it at the end, and the PHP parser throws a fit.

Any thoughts on that?

So my suspicion is that the few reports I’ve had were from themes that had “sketchy” html OR it has code that the AMP plugin doesn’t handle as well. Once the theme generates the page, AMP comes in, rewrites the page, and then EWWW gets it at the end, and the PHP parser throws a fit.

I wonder if this could happen when extra plugins are used in addition of the default AMP plugin; there are a few plugins out there that build on top of the core AMP plugin, and change its default behaviour. Here is an example.

@alias79 Do you happen to use this plugin, or another one in addition to the default AMP plugin?

Specifically with the problem of AMP, I have not tested with other AMP plugins, only with the official WordPress plugin. In the past I tried other alternatives, but they did not work very well, so I stayed with this one, although it does not allow much configuration margin.

@jeherve, I found the problem finally today.

The issue is (very) outdated versions of libxml. In version 2.8.0, released in 2012, they fixed a bug where the noscript tag was not being allowed in the head element of the page: https://xmlsoft.org/news.html

So, if you upgrade libxml to anything 2.8+ it works just fine with AMP and EWWW’s Alt WebP. Previous releases are 7 years old, so if your webhost can’t/won’t update that, get out and find yourself someone competent to host your site.