Using S3 as static image storage for website frontend served by AWS Amplify

Question

I´m triying to figure out if it´s a good idea to store static files and assets into an s3 bucket and later load this images inside <img> tag using the file url provided by S3.

Example:

<img src="https://my-bucket-s3.s3.amazonaws.com/route/image.jpg" alt="image">

Considerations:

• The website is public, everyone will have access to it, therefore every image should be public to everyone.
• I´m using Amplify to serve frontend.

Questions:

• It´s a good idea (and a good practice) to store this files as public objects inside S3 bucket and load them directly in the frontend?

• Do I have to consider any security actions over this files?

• Should I consider an alternative?

Thank you in advance!

Answer 1

In case the bucket's only purpose is to serve public content then yes you use a bucket for image hosting.

Q1. Your bucket is for website hosting so it's ideal to use the same bucket for images too. In case you plan to use a different host then your website will first try to do a DNS lookup and this can increase the latency. Although you can use alternative strategies like prefetch, preconnect to solve this but its better to avoid it.

Q2. As far as I know, keeping the bucket read only is fine considering its used for website hosting.

Q3. A better practice is to serve these assets via any CDN like CloudFront or something, as assets are static resources, they hardly change and you can implement caching strategies to avoid hitting S3 every time. They will also resolve faster and you can configure the edge locations to keep them closest to users' geo-location. All these can significantly reduce the latency.