Stretched / distorted images on AMP pages

[nicopujol]

We've been using AMP for several years, and since the last month or two we're seeing stretched images on AMP pages. The issue seems to:

• happen particularly on posts uploaded with the new Gutenberg editor
• come and go somewhat randomly on these pages
• never occur on non-AMP pages

Examples: https://bit.ly/2Hsblb1

https://bit.ly/2FI8ZmP

We are using a third party AMP theme, which we disabled completely and tested with the base Automattic AMP plugin, same behavior.

Please let us know what you'd like us to provide in addition. Happy to share a WordPress login privately. Thanks, Nick

[nicopujol]

Checked the WordPress AMP support forum to see if others are having this issue. This site owner appears to have the same problem: https://wordpress.org/support/topic/the-images-are-deformed-in-amp-version/.

[westonruter]

The non-AMP version of the image is:

<figure class="wp-block-image">
    <img
        src="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg"
        alt="L'oeuf cocotte au roquefort, lardons et champignons" 
        class="wp-image-4782"
        srcset="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg 1024w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-640x427.jpg 640w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-768x512.jpg 768w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons.jpg 1200w"
        sizes="(max-width: 1024px) 100vw, 1024px"
    >
</figure>

This is getting converted into AMP as:

<figure class="wp-block-image">
    <amp-img 
        src="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg" 
        alt="L'oeuf cocotte au roquefort, lardons et champignons" 
        class="wp-image-4782 amp-wp-enforced-sizes" 
        srcset="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg 1024w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-640x427.jpg 640w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-768x512.jpg 768w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons.jpg 1200w"
        sizes="(min-width: 684px) 684px, 100vw" 
        width="684" 
        height="1024"
    >
    </amp-img>
</figure>

The problem seems to be the width and height are reversed somehow. I tried copying your HTML output into the AMP by Example playground and swapped the values and then I got a correctly-rendered image:

So something is clearly something is wrong here.

[westonruter]

I tried to reproduce the issue on my environment by putting the non-AMP markup into a new post, but it comes out as expected:

<figure class="wp-block-image amp-wp-dc251bd">
<amp-img src="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg" alt="L'oeuf cocotte au roquefort, lardons et champignons" class="wp-image-4782 amp-wp-enforced-sizes" srcset="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg 1024w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-640x427.jpg 640w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-768x512.jpg 768w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="683" layout="intrinsic"></amp-img>
</figure>

[westonruter]

@nicopujol I can't actually verify that you are in fact using the official AMP plugin: https://wordpress.org/plugins/amp/

I don't see the expected generator meta tag.

Please confirm.

[nicopujol]

@westonruter we are using the AMPforWP plugin, which I believe embeds the core AMP plugin. For the bug submission, the 3rd screenshot was taken after disabling AMPforWP and going to an incognito window, you can see the distortion.

I just disabled AMPforWP again and loaded the core AMP plugin on the French install and experiencing the issue: https://www.laylita.com/recettes/oeuf-cocotte-au-roquefort-lardons-et-champignons/amp/

[westonruter]

None of the images appear stretched for me on https://www.laylita.com/recettes/oeuf-cocotte-au-roquefort-lardons-et-champignons/amp/

The AMP-for-WP plugin includes a very old version of the AMP plugin (v0.4) last I checked.

The generated amp-img HTML is:

<figure class="wp-block-image amp-wp-dc251bd"><amp-img src="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg" alt="L'oeuf cocotte au roquefort, lardons et champignons" class="wp-image-4782 amp-wp-enforced-sizes" srcset="https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-1024x683.jpg 1024w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-640x427.jpg 640w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons-768x512.jpg 768w, https://www.laylita.com/recettes/wp-content/uploads/2019/01/Oeuf-cocotte-au-roquefort-lardons-et-champignons.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="683" layout="intrinsic"></amp-img></figure>

Note the width and height (width="1024" height="683") are now correct.

[nicopujol]

Hi @westonruter , still seeing distortion on AMP images using the core AMP plugin: https://bit.ly/2WD3Bqt. We are food bloggers and love AMP, and have been able to make the technology work for years. This is the first time we are seeing such a sticky bug. Happy to get on a short screenshare or provide you a login to our server if it helps. Thanks again.

[westonruter]

@nicopujol I can see the same thing:

Non-AMP markup:

<figure class="wp-block-image">
    <img 
        src="https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-768x1024.jpg" 
        alt="Vegan platter with carrots, cucumber, celery, radishes and beets" 
        class="wp-image-2480" 
        srcset="https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-768x1024.jpg 768w, https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-300x400.jpg 300w, https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets.jpg 1200w" 
        sizes="(max-width: 768px) 100vw, 768px" 
    />
</figure>

And the AMP version:

<figure class="wp-block-image amp-wp-dc251bd">
    <amp-img 
        src="https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-768x1024.jpg" 
        alt="Vegan platter with carrots, cucumber, celery, radishes and beets" 
        class="wp-image-2480 amp-wp-enforced-sizes" 
        srcset="https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-768x1024.jpg 768w, https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets-300x400.jpg 300w, https://www.nicolaspujol.com/wp-content/uploads/2019/01/Vegan-platter-with-carrots-cucumber-celery-radishes-beets.jpg 1200w" 
        sizes="(max-width: 768px) 100vw, 768px" 
        width="800" 
        height="600" 
        layout="intrinsic"
    ></amp-img>
</figure>

The problem is that the width and height are for some reason being determined to be 800x600. If I change the dimensions to be 768x1024 then they appear as expected. I just tried it locally and I'm seeing the same thing.

So what I think may be happening is you have a cached version of the image that has the incorrect dimensions. So either you can flush your transients cache (or object cache if using an external object cache), or as a quicker workaround you can just add explicit width=1024 height=768 right to the markup in the post.

[nicopujol]

@westonruter thanks, I've been thinking about this. Over the weekend we attempted to clear all caches:

• server cache (Nginx)
• Cloudflare => turning on Dev Mode, which bypasses the CDN cache, except for web app firewall
• browser cache
• uninstalled and deleted the AMP plugin (all AMP related plugins, including Yoast SEO glue for AMP) and reinstalled

I will look into it more with Cloudflare, in case their AMP cache does not get bypassed. Do the image attributes in amp-img get stored statically somewhere in database tables?

[westonruter]

@nicolastruchi It wouldn't be any of those caches. If you don't have an object cache like Memcached, then you'll need to flush your transients. You can do that via the Transients Manager plugin, or via WP-CLI as wp transient delete --all. If you are using an external object cache, then you should flush in WP-CLI via wp cache flush.

[nicopujol]

@westonruter progress! Flushed transients (never heard of these before) and no more distortion, for now. So glad you thought about this.

We need to take a fresh look at AMP theme options. I see you recently added a Paired Mode to the core plugin. After giving it a very quick try, it seems to create ?amp URLs, while our AMP pages so far have been /amp/. Any guidance on how to transition to Paired mode without confusing the Google console and index?

[westonruter]

@nicopujol in paired mode, the /amp/ URLs redirect to ?amp. In any case, the underlying canonical URL remains the same, so the Google search index should not be confused.

[nicopujol]

Paired mode seems to work 100% on the smaller site. For the bigger install, it returns 3 hard errors the AMP sanitizer could not automatically fix: https://bit.ly/2BhyA2g. Are they all related to the jwplayer videos our ad partner is running? This is a separate issue from images, let me know if you prefer us starting a new thread.

[westonruter]

@nicopujol Please do open a new issue. Thanks.

[MARQAS]

Hi @westonruter, the issue is occurring in amp-wp plugin as well. Check this screenshot (https://monosnap.com/file/bUtpuoB3nVzbq44NXAmz9hTBQ0Jr7d). There are 2 images, one uploaded through Gutenberg Image block and other through HTML markup. The one added through Gutenberg is getting stretched. Can you please test it again by uploading the image through Gutenberg Image block? Use this image for testing purpose: https://www.laylita.com/recipes/wp-content/uploads/2018/12/Molten-chocolate-cake.jpg Not everyone is facing this issue, only a few and @nicopujol is one among them.

[MARQAS]

I have just reset the transient and it is working fine now, is there any problem in the setting of the transient for the first time? I have already updated the Image sanitizer in AMPforWP plugin with the latest of amp-wp plugin.

[westonruter]

I added an image block with the uploaded image and I added an image blog with the remote image URL. Neither image is stretched for me.

When reporting stretching, it's important to also share the underlying amp-img markup.

[MARQAS]

I am sorry I didn't take the image markup at that time and I am unable to recreate it again. But when I checked the dimensions, it was something like 251x140. I cleared the transients and everything is resolved now. I'll let you know if I find or come across this issue again. Thank you for looking into it.