On the non-AMP version I can see you’re serving WebP to supporting browsers via the picture
element:
<picture>
<source srcset="https://aclayjar.net/wp-content/uploads/suffering-for-Christ-500x430.jpg.webp 500w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-1024x881.jpg.webp 1024w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-768x661.jpg.webp 768w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-300x258.jpg.webp 300w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ.jpg 1280w" sizes='(max-width: 500px) 100vw, 500px' type='image/webp'>
<img width="500" height="430" src="https://aclayjar.net/wp-content/uploads/suffering-for-Christ-500x430.jpg" class="attachment-medium size-medium" alt="suffering for Christ" loading="lazy" itemprop="image" srcset="https://aclayjar.net/wp-content/uploads/suffering-for-Christ-500x430.jpg 500w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-1024x881.jpg 1024w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-768x661.jpg 768w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ-300x258.jpg 300w, https://aclayjar.net/wp-content/uploads/suffering-for-Christ.jpg 1280w" sizes="(max-width: 500px) 100vw, 500px" data-eio="p"/>
</picture>
The use of picture
isn’t yet support in AMP. The AMP plugin is stripping it out and then converting the contained img
child element into amp-img
. Supporting picture
is something we’ve been looking into:
https://github.com/ampproject/amphtml/issues/21912
https://github.com/ampproject/amphtml/issues/30442#issuecomment-717009871
https://github.com/ampproject/amphtml/issues/24233#issuecomment-589416933
https://github.com/ampproject/amp-wp/issues/1316
For now, the best option is for you to dynamically serve WebP to browsers based on the Accept
request header. If you’re using Apache, then you could do so using a a rewrite rule like https://github.com/vincentorback/WebP-images-with-htaccess
You can do something similar on Nginx.