Search code examples
htmlamp-html

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.


Solution

  • 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!