• Resolved edjarrett

    (@edjarrett)


    I have all of my images in WebP format. And they are served with non-AMP pages. But not with AMP. PageSpeed Insights tells me to use WebP images. And I have tried with EWWW Image Optimizer and Imagify. But with no luck. Is there a trick to this?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    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.

    @edjarrett As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!

    Thread Starter edjarrett

    (@edjarrett)

    I solved it by using the WebP Express plugin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using WebP’ is closed to new replies.