CODEWITHSUNDEEP
htmlamp-html
fpscolin
fpscolin

Reputation: 403

Google AMP image requests are 404'ing

My AMP pages are passing validation, but some images are 404'ing. When accessing the pages from my site, the images load correctly. However, when the pages are loaded from Google's AMP CDN (I believe they cache all the pages) certain images return 404s.

In the network tab, I noticed that the image GET requests are correct when on my site (content-type: image/png). Google's cached pages, on the other hand, make a GET request with content-type "text/html" for the images that don't load. The GET response is a basic HTML page indicating a 404.

It should be noted that several images do load successfully. They're stored in both an image folder, and remotely on a parse-server. Both image locations have successfully provided pictures, just not all the time; and I can't seem to find any inconsistencies that could cause some to respond 200, others 404.

I would greatly appreciate any tips for figuring this one out!

edit: Is it possible that Google hasn't cached the images yet? The page itself is definitely cached.

Upvotes: 2

Views: 1143

Answers (3)

fpscolin
fpscolin

Reputation: 403

Problem located! The images were originally pulled off of Google's Image API. The API allowed me to specify a file format (I wanted .png's). Unfortunately, if the image Google had was a JPEG, they simply added a .png extension to it and returned it to me.

Basically, if the AMP-IMG was expecting example.png, it only works if example.png is truly png encoded (you can tell the encoding by opening the file in a text editor, PNG will have a "png" near the top).

In my case, example.png was actually example.jpg RENAMED to example.png (jpeg encoding still). Google's caching service doesn't like this, and returned a 404.

I simply renamed all my photos to .jpg extension, and then batch converted them to true .png's using Photoshop. Hope this helps if anyone else is stuck!

Upvotes: 0

Andrew
Andrew

Reputation: 1203

The problem is that you're using a relative path to the image instead of an absolute path. So the following <amp-img> tag,

<amp-img ... src="/images/city_images/633_Image.png">

needs to be

<amp-img ... src="https://chargehub.com/images/city_images/633_Image.png">

That should fix your issue.

Upvotes: 3

derat
derat

Reputation: 217

When loading your sample link, I get a 404 for https://cdn.ampproject.org/ii/w1000/s/chargehub.com/images/city_images/633_Image.png. When I request the corresponding original image from your server, I see a Cache-Control: no cache header:

% HEAD https://chargehub.com/images/city_images/633_Image.png | grep Cache-Control
Cache-Control: no-cache

While I don't have any guesses about why other images that are also served with Cache-Control: no cache, like https://chargehub.com/logos/ChargeHub-Logo.png, do get cached, I would try instructing your web server to not set this header to see if that helps.

Upvotes: 1

Related Questions