Amphtml: Weird image problems with AMP cache

[cagataygurturk]

Without explaining so much I will give some image examples which are broken in AMP cache.

Original => https://amp.instela.com/s/images/amp/ic_menu_white_2x_web_24dp_.png
Cached => https://cdn.ampproject.org/i/s/amp.instela.com/s/images/amp/ic_menu_white_2x_web_24dp_.png

Transparency is lost.

Also we have a couple of broken images in our microservice which creates user profile pictures:

https://cdn.ampproject.org/i/s/s.instela.com/s/avatar/silhouette836ef76c95a9b0c56ab8cd526e24294e.t.jpg
https://cdn.ampproject.org/i/s/s.instela.com/s/avatar/jmh4wafbq2oguqihra8gd74bgxehj5n3r47oenz5pomke425fb.t.jpg
https://cdn.ampproject.org/i/s/s.instela.com/s/avatar/f8732dbedf84830ac8da35dffd54a2e09874.t.jpg

Original images are loading correctly, and when I try to access to them via AMP cache I see that cache is getting 200 from backend. So our backend is definitely delivering the image file to cache.

For example the same backend code is working for some of images:

https://cdn.ampproject.org/i/s/s.instela.com/s/avatar/432cc7886feb99f6416c83d5007f812920063.t.jpg

But roughly 30% of images are giving 404 when they are requested via cache.

I checked headers and could not find anything specific. Can you help?

[dvoytenko]

@cagataygurturk Thanks a lot for the report. Will be tracked internally via b/30867478

[cagataygurturk]

Thank you, for reference, the transparent png is taken from ampbyexample.com and it seems the same issue exists also there:

https://cdn.ampproject.org/i/s/ampbyexample.com/img/ic_menu_white_2x_web_24dp.png

[Odoyle]

@dvoytenko any update on this? I'm seeing the same symptoms, sample url being
https://cdn.ampproject.org/i/s/media.laineygossip.com.s3.amazonaws.com/thumbs/tmb_173x173_idris-elba-weekend-19aug16-01.jpg

[Odoyle]

@cagataygurturk any luck on diagnosing this? Specifically the broken imgs are what I'm experiencing. Amp validations are fine, and I can access pages via google amp cache, but the amp cache img references are all 404.

[cagataygurturk]

I feel it is nothing we can do about as end users. It's obviously a internal bug that I attempted to workaround but then decided to wait for a fix from AMP team. That's why I am postponing AMP support for my platform.

[rudygalfi]

We're looking into this. Noticed a couple things:

All of the 404 images listed have unmatching MIME types. They are listed as JPEG but the actual content is PNG.

For the last URL, we encoded the URL as HTTPS but the origin is only supporting HTTP now.

[Odoyle]

@rudygalfi hilariously enough we just found this same thing 10 minutes ago. The google cache must sniff the mime-type and reject it if they don't match. We're going to try playing around with the response header X-Content-Type-Options = "nosniff" to see if the cache respects it.

[rudygalfi]

Regarding X-Content-Type-Options: "nosniff", the Google AMP Cache does not consult that header.

[cagataygurturk]

Thank you, then for the most of URL the problem is mime type. It is a bug with our backend but maybe you could consider documenting this behaviour.

For the transparent png I think cache still has some problems, that's why i don't close the issue at the moment.

[hasghari]

I too am experiencing a weird issue with a cached amp image where the transparent color has changed. The original image is here: https://images.g2crowd.com/uploads/product/image/thumb_square/thumb_square_1473783866/salesforce-crm.png and the cached amp image is here: https://cdn.ampproject.org/ii/w270/s/images.g2crowd.com/uploads/product/image/thumb_square/thumb_square_1473783866/salesforce-crm.png

When comparing the 2 images with imagemagick identify -verbose, I can see in the original image the property Transparent color: none whereas in the cached version it's Transparent color: black

[dvoytenko]

@hasghari Thanks a lot for the examples! We are researching this.

[adelinamart]

The bug opened for this was fixed internally. If there's still an issue please re-open with new details. Thank you

[Karunrana]

I am using amp on my website. When I load the page on mobile it does not load the background image properly. Here is URL of the image.

https://cdn.ampproject.org/i/s/rentzeal.com/img/index_mobile.jpeg
It downloads the image, when I try to open it, it says that the image is corrupted.

[jridgewell]

@Karunrana: I've opened an Google internal issue about this. b/65208518

[Karunrana]

@jridgewell my issue still unresolved, any progress on Google internal issue about this. b/65208518.

issue with amp images could be that when google caches the image, it changes the dimensions. See this image https://cdn.ampproject.org/i/s/rentzeal.com/img/index.jpeg
it has the dimensions 1139x1820
whereas the original image had the dimensions of 2002x3199

This is the main cause of my prblm, So is there a way to avoid this dimension change?
as i use this image as a sprite image...

[jridgewell]

The issue is still being worked on internally. Our suspicion is that it's due to the image being a JFIF format, but it's being served as an image/jpeg.

[kevalteknopoint]

Hi,
We are facing an issue while loading the amp page from CDN. The SVG images giving 404 error while loading page from CDN, whereas it working find when amp pages load directly without google CDN
Google CDN amp page link:
https://www.google.com/amp/s/www.iffcotokio.co.in/health-insurance/amp
Normal page link:
https://www.iffcotokio.co.in/health-insurance/amp

SVG image which gives error:
Google CDN path
https://www-iffcotokio-co-in.cdn.ampproject.org/content/dam/iffcotokio/iffco-images/sprite-sheet.svg
Without Google CDN image path
https://www.iffcotokio.co.in/content/dam/iffcotokio/iffco-images/sprite-sheet.svg

Any resolution for this issue.

[jridgewell]

@kevalteknopoint: I'm not sure how you got that CDN image URL, but it's incorrect. The correct URL for that image is https://www-iffcotokio-co-in.cdn.ampproject.org/i/www.iffcotokio.co.in/content/dam/iffcotokio/iffco-images/sprite-sheet.svg. Notice i/www.iffcotokio.co.in/ is needed.

[kevalteknopoint]

Hi @jridgewell Thanks for your response, Actually the image URL is generated by AMP dynamically. In AMP HTML file we have added relative URL like /content/dam/iffcotokio/iffco-images/sprite-sheet.svg, and https://www-iffcotokio-co-in.cdn.ampproject.org/content/dam/iffcotokio/iffco-images/sprite-sheet.svg url is generated on the fly when we use google CDN to load amp page. Do we need to use an absolute URL instead of a relative?

[jridgewell]

@kevalteknopoint: This is a bug with the Google AMP Cache (tracked internally at b/174850841). Until we submit an actual fix for relative URLs, using an absolute URL will fix it. /cc @Gregable

[Gregable]

The AMP Cache fix has been checked in and should get released within the next couple weeks. This issue is already closed, so this will be the last update.