AWS S3 Image Cache Control

This guide explains how to set up image caching using AWS S3. By setting up image caching, you can optimize the loading and performance of images in your web application.

Creating an S3 Bucket and Uploading Images

Create a new bucket in the AWS S3 console and upload your images.

Articles about creating an AWS S3 bucket will be created separately.

Method Using IAM Policies

  1. Move to the IAM service from the AWS Management Console.
  2. Create a new policy in policies.
  3. Here is the JSON code related to granting write permissions.

IAM

{
    "Version": "2012-10-17", // Check Version
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*" // Check bucket name
        }
    ]
}

Associating Policies with IAM Users

  1. You need to select a user in the IAM service. Unless it's a company account, there are only individuals. Of course, there may be cases where an individual invites a fellow developer to proceed, in which case, you just need to invite the user and click on the user.
  2. Associate the policy you created in the 'Permissions' tab.

Method Using S3 Bucket Policies

  1. Select a bucket in the S3 service.
  2. Click the 'Edit Bucket Policy' button in the 'Permissions' tab and grant write permissions.

s3 bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

Cache-control Using AWS CLI

You need to define the Cache-Control value, which is a cache control header for images. max-age=3600 instructs to cache the image for 1 hour.

For data that continues to change dynamically, it is recommended to use max-age=3600, and for data that is not a static image that changes regularly, it is recommended to proceed with Cache-Control: public, max-age=31536000, immutable.

Max-age is a recommended value and does not necessarily need to be followed. My personal recommendation is max-age=31536000

aws cli

aws s3 cp --metadata-directive REPLACE --cache-control "max-age=3600" s3://your-bucket-name/path/to/your/image.jpg

aws s3 cli

Testing and Verification Using the Chrome Console Window

You can use Chrome DevTools to check the cached images.

  1. Press the F12 key and select 'Tools > Developer Tools'.
  2. Find the image request in the 'Network' tab.
  3. Select the image, open the Response Headers or 'Response Headers' section displayed in the request detail table, and check the value of Cache-Control (If the value of Cache-Control is empty or Null, Cache-Control has failed. Therefore, you need to check the response after entering the AWS CLI command.)

Why AWS S3 Cache-Control is Necessary

By setting up image caching using AWS S3, you can improve the performance of your web application and enhance the user experience.

This allows you to optimize the download and load time of images and handle large-scale traffic.

aws s3 cli