Images are not showed if JetPack Lazy Load is enabled

Can you please help us to recreate this? More info on this would help us fix this faster.

Yes, sure.
What do you need?

We have installed amp for wp and jetpack. In jetpack options, under performance we have enabled Lazy Loading images. With this configuration, the images are not displayed. The amp code generated for images is:

<amp-img data-hero="" width="1024" height="576" src="https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?fit=1024%2C576&ssl=1" class="attachment-large size-large wp-post-image jetpack-lazy-image amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout" alt="" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" layout="intrinsic" i-amphtml-layout="intrinsic" i-amphtml-ssr="" i-amphtml-auto-lightbox-visited=""><i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU3NiIgd2lkdGg9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+" i-amphtml-auto-lightbox-visited=""></i-amphtml-sizer><amp-img fallback="" data-hero="" width="1024" height="576" src="https://conlamochila.com/wp-content/plugins/accelerated-mobile-pages/images/SD-default-image.png" class="attachment-large size-large wp-post-image jetpack-lazy-image amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built" alt="" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" layout="intrinsic" i-amphtml-layout="intrinsic" i-amphtml-ssr="" i-amphtml-auto-lightbox-visited=""><i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU3NiIgd2lkdGg9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+" i-amphtml-auto-lightbox-visited=""></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="" src="https://conlamochila.com/wp-content/plugins/accelerated-mobile-pages/images/SD-default-image.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" i-amphtml-auto-lightbox-visited=""></amp-img><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="" src="https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?fit=1024%2C576&ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-hero="" i-amphtml-auto-lightbox-visited=""></amp-img>

You can see it here: https://conlamochila.com/visita-por-libre-a-monte-alban/

If we disable lazy load images on jetpack plugin, the code generated for images is this.

<amp-img fallback="" data-hero="" width="1024" height="576" src="https://conlamochila.com/wp-content/plugins/accelerated-mobile-pages/images/SD-default-image.png" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built" alt="" srcset="https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?w=1200&ssl=1 1200w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=300%2C169&ssl=1 300w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=1024%2C576&ssl=1 1024w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=768%2C432&ssl=1 768w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=450%2C253&ssl=1 450w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=780%2C439&ssl=1 780w" layout="intrinsic" i-amphtml-layout="intrinsic" i-amphtml-ssr="" i-amphtml-auto-lightbox-visited=""><i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU3NiIgd2lkdGg9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+" i-amphtml-auto-lightbox-visited=""></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="" src="https://conlamochila.com/wp-content/plugins/accelerated-mobile-pages/images/SD-default-image.png" srcset="https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?w=1200&ssl=1 1200w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=300%2C169&ssl=1 300w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=1024%2C576&ssl=1 1024w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=768%2C432&ssl=1 768w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=450%2C253&ssl=1 450w, https://i0.wp.com/conlamochila.com/wp-content/uploads/2021/09/VisitaPorLibreMonteAlbanOaxaca.jpg?resize=780%2C439&ssl=1 780w" i-amphtml-auto-lightbox-visited=""></amp-img>

As you can see, with jetpack lazy load enabled, the src and srcset values load values as this

srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU3NiIgd2lkdGg9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"

Regards

• This reply was modified 2 years, 5 months ago by Jan Dembowski.
• This reply was modified 2 years, 5 months ago by Jan Dembowski.

Thanks for sharing in detail. We will try to re-create the issue on our end and get back to you immediately once we’ve done with it.

We re created it our end and it seems no issue. The images are perfectly loading from jebpack server only without any issues.

Here is I’m sharing some references regarding it:
https://prnt.sc/kkXGu8EIi6D1
https://prnt.sc/h2MancQHE3xM
https://garage2.magazine3.com/test-new-webp/amp/

And also we have inspected your URL too. There also the images are loading fine: https://conlamochila.com/visita-por-libre-a-monte-alban/amp/

Can you please cross check it again and let us know back?

Hi Ahmed.
We have the last version plugin.
Now I can see that if the url has the /amp at the end, the images are displayed. If we use mobile devices, the /amp urls redirect to the url without /amp and then the images are not loaded.

We have configured the amp for wp plugin with this option enabled:
Amp – Settings – Advanced Configuration – Preserve original permalinks (enabled)

If we dissable this options, the website load the urls with /amp at the end and the images are displayed, but if we enable this options, the page load urls without /amp at the end and then the images are not displayed.

We use the design 1 theme.

Thanks

We cross-checked on the mobile version also, And it seems the images are displaying even if we enable the Preserve original permalinks option. It might be due to caching problem. Can you please give it a try by clearing all the caches and check once if the issue is occurring or not? So that we will help you accordingly to resolve it.

I Ahmed.
I have cleaned the caches and deactivated the autoptize plugin, I have tryed diferent plugins. The behabiour is the same. It is:
With jetpack lazyload enabled and Preserve Original Permalinks enabled, the images in amp mobile version are not displayed.

srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU3NiIgd2lkdGg9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"

With jetpack lazyload enabled and preserve original permalinks disabled, the images in amp mobile version are displayed.

Now we have the Preserve Original Permalinks disabled to display images in our articles.

Please, tell me what do you need ??
Our WordPress version is 6.0

• This reply was modified 2 years, 5 months ago by Steven Stern (sterndata).

Can you please let me know, which WordPress theme are you using at your end currently? So that we will use the same once and test if happen due to that or something.

Hi Ahmed.
The theme for desktop version is pixwell.
The theme for amp version is Design 1 (we have tested Design 2 with the same result).

Regards

If possible, please reach us via our site.