Images are not working in Site when amp enabled

@zotezo thanks for your topic!

Could you temporarily disable any (image) optimization plugins you have and let us know if the images restore?

Hi,
Issue not resolved after disabling EWWW Image Optimizer plugins.We are running default Astra theme but using Nginx Cache and Redis Object Cache.

What can be the reason why the images are not loading in AMP?

Please help me.

Thanks,

Please share the URL for where the issue can be seen.

Hi,
Please check these pages https://www.zotezo.com/in/reviews-category/make-up/?amp

https://www.zotezo.com/in/reviews/trichup-anti-dandruff-shampoo-200ml-pack-of-3/?amp

Thanks,
Dwaipayan

Hi.
For this page https://www.zotezo.com/in/reviews/m-a-c-retro-matte-lipstick-ruby-woo/?amp is not showing an image when it is an amp page.

Please refer to this article: https://share.getcloudapp.com/7Ku0gABZ

And if the page is non-amp, then the image will load on the page i.e.,https://www.zotezo.com/in/reviews/m-a-c-retro-matte-lipstick-ruby-woo/

Please refer to this screenshot: https://share.getcloudapp.com/5zu1p97r

Thanks,
Dwaipayan

A similar issue happens on this page also https://www.zotezo.com/in/reviews/dolo-500mg-tablet/?amp

Here also image issue happens.
How to rectify image issue in AMP?

You’re using WooCommerce which is not yet AMP-compatible. The The quickest way to resolve this is to disable the “Product” post type from being enabled for AMP.

There is no way to display the Woocommerce product to be AMP compatible?
Any roadmaps to make it compatible with AMP?

Is the reason also these types of pages are https://www.zotezo.com/in/reviews/dolo-650mg-tablet/?amp also not AMP-compatible?

If you check that url https://www.zotezo.com/in/reviews/dolo-650mg-tablet/?amp here also image issue is happening, is it for woocommerce products?

• This reply was modified 4 years, 7 months ago by zo.

WooCommerce without any Woo extensions has an OK fallback experience in AMP. You seem to be using some product gallery extension which doesn’t have a fallback experience.

Otherwise, some of the issues seems to be that your site has too much CSS. Some of the validated URLs you screenshotted have CSS over 100% of the budget (of 75KB). When this happens, the AMP plugin starts to remove plugin CSS from the page. You can see which CSS specifically is being removed by looking at the Stylesheets metabox on the validated URL screen. The list of Stylesheets can tell you who is responsible for going over the budget.

That’s great.But in case of normal products https://www.zotezo.com/in/reviews/m-a-c-retro-matte-lipstick-ruby-woo/ we are not using any gallery it is default Astra pro setup only.so what will be the best solution to see image product options all features that woocmmerce providing.

In case of medicine products https://www.zotezo.com/in/reviews/dolo-650mg-tablet/?amp if I want to diasble some features like search,error form amp what additional codes needs to write?

Any roadmap to make full compatibility of woocmmerce with amp

I want your help to make those pages to be amp compatibility with limited features if support on AMP?please suggest me how to do that?

AMP compatibility for WooCommerce would be a question for Automattic. I am not aware of immediate plans, although work is underway to make Jetpack fully AMP-compatible. We’ll be happy to support any effort to make Woo AMP-compatible, but until the effort is lead by the Woo team you’ll get mixed results when when trying to use AMP. Your mileage will vary.

Hi,
In some of the cases images are showing like for this page it is showing https://www.zotezo.com/in/reviews/clinique-stay-matte-oil-free-makeup-14-vanilla/?amp

But for this page it is not showing https://www.zotezo.com/in/reviews/fitbit-versa-health-and-fitness-smartwatch-black/?amp

What is the actual issue of not showing the images?

Please provide me a solution.

Does the AMP plugin report CSS going over 100% of the 75KB limit? Are any stylesheets being excluded when you look at the Stylesheets metabox on the Validated URL screen?

Hi,
Yes for this product also https://www.zotezo.com/in/reviews/dolo-650mg-tablet/?amp
https://www.zotezo.com/in/reviews/clinique-stay-matte-oil-free-makeup-14-vanilla/?amp
https://www.zotezo.com/in/reviews/fitbit-versa-health-and-fitness-smartwatch-black/?amp

Showing error CSS usage 100% above.

But unfortunatly for second product images are showing in amp but this product not showing any images https://www.zotezo.com/in/reviews/fitbit-versa-health-and-fitness-smartwatch-black/?amp
from admin I have set image width to 400 and height to 150
What is the issue please let me know.

Thanks,

It’s most likely because the amount of CSS is exceeding 75K limit. This is resulting in the styles needed to display the image being stripped out.