How to Serve Images from Amazon S3 in 4 Steps

If you’re seeking out the simplest way to serve your images stored in S3, this article hits the spot!

S3 is no longer a strange term for Internet users. Not only does it give the green light to storing unlimited kinds of website files at a low price, but S3 is also notable for its extremely secure service.

By automatically blocking all public access, it’s almost out of question to serve images in the S3 buckets to the public.

In the article today, we will take a weight off your mind, by giving you step-by-step instructions on how to serve images from S3.

What Happens if Displaying Images Stored in Amazon S3?

Commonly, you’ll encounter an XML Denied Error message whenever you try accessing your images stored in S3, even through the AWS interface.

 pda-xml-denied-error-message

Why is that? The only reason lies in its bucket access policy, in which the S3 storage bucket is set private by default. The most painless way to serve your images from S3 is by enabling your bucket to be accessible to the public. Fortunately, Amazon S3 allows you to easily set up, limit, or control public access to your buckets, with no coding required.

In the following part, you’ll learn how to serve images from Amazon S3 by making your bucket publicly accessible.

Serving Images from Amazon S3 by Making S3 Buckets Publicly Accessible

What we’re gonna do here is create and publish a new public S3 bucket that contains the selective images you want to display. This helps avoid the scenario that all of your images will be public and indexed by search engines.

The process basically goes through 4 steps:

  1. Create a public S3 bucket
  2. Upload images into that bucket
  3. Enable that bucket for the public
  4. Make images in the S3 bucket publicly accessible

Step 1: Create a new S3 Bucket that will be public

  1. Sign in or create an AWS account.
  2. Once your account is set up and verified, head over to the tab “Show All Services” and select S3.
    pda-all-aws3-services
  3. Click Create Bucket on the Amazon S3 console dashboard. A “Create a bucket” popup appears, now fill in your bucket name and choose Region.

Note: Your bucket name should be unique across Amazon S3 and relevant to you or your business. After you create your bucket, you can not change your bucket name or region.

 pda-create-buckets

Lastly, hit Create to finish this step. An empty bucket will be now included in the Buckets pane.

Step 2: Upload Images into That Bucket

Navigate to Upload, click Add Files and select the images you want to serve from S3. After that, hit Start Upload.

pda-upload-image-to-bucket

Step 3: Make that Bucket Public

In your S3 management console, look for your new bucket and click on it. You’ll see its access state of “Bucket and object not public” in the Access column.

 pda-bucket-object-not-public

Next, you must set access permissions to your bucket. In the “Permissions tab,” click on the Block Public Access option. A new S3 bucket is set to restrict all public access by default, that’s why you see the “Block all public access” option is on. Choose Edit at the top right corner.

 pda-s3-block-public-access

After that, uncheck the “Block all public access” option and click Save. You’ll be asked to confirm the setting, just enter “confirm” and choose Confirm to save your changes.

pda-confirm-block-all-public-access

Now you go back to your S3 bucket list, you should see the access state has changed to “Objects can be public.”

Still, it doesn’t mean you can freely view images from that bucket. An Access Denied error is still shown up when you try to access your images through a web browser.

Step 4: Allow Images in that S3 Bucket Publicly Accessible

In the bucket list, select your bucket again. Navigate to the Permissions tab, choose the Bucket Policy option, which opens the “Bucket policy editor.”

 pda-aws3-permission-bucket-policy

Next, copy and paste the following code snippet to the text area, which will give the proper access permission to your bucket. Make sure that you replace “YOUR-BUCKET-NAME” with your actual bucket name.

{"Version": "2008-10-17",
"Statement": [{"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
}]}

Click “Save,” and you see a warning message show up.

 pda-public-bucket-warning-message

Next, go back to your bucket list and your bucket access state should be public like this.

Now all the images in your bucket are public.

Conclusion

This article has walked you through the four to-the-point steps to serve your images from S3.

Among many ways to display images stored in S3, serving images by making the S3 bucket publicly accessible stands out as the most hassle-free solution.

You can apply that method not only to serve images but also to any of your files.

Leave a comment below if you need any more assistance on this topic or have any other better ways to recommend.

Subscribe to our Youtube channel and follow our website for more helpful articles.