Amplify: how to fix images that show up locally but not after deployment

You might have encountered this issue when using Amplify to host your single-page applications.

An image in the public folder would show up perfectly fine when running locally but it was not found on the live site after Amplify deployed your change. Curiously, this only happens with some images – jpeg, avif, webp…

The reason for this is the default rewrite rules Amplify generates:

Notice that jpeg, avif and webp are all missing from the above?

The fix is to edit the rewrite rules and add those file extensions to the regex.

Alternatively, you can try fetching the images from Cloudinary instead. Which offers a number of advantages including:

• optimize images to webp format on-demand
• resize images on-demand so you can easily serve different-sized images with the srcset attribute

For other ways to optimize the performance of your single-page application, check out my last post on the 10 performance optimization tips I learned after rebuilding two of my landing pages from scratch.