How to deliver optimized responsive images from your AWS S3 bucket with TwicPics

AWS S3 is one of the most popular storage solutions for website and application assets. Trusted by companies of all sizes, it is reliable and easy to scale.

It is also cost-efficient. As a ballpark, S3 Standard storage costs about $0.023 per GB per month (or slightly less for higher volumes). For most websites, the total cost of storing images on S3 is negligible compared to other infrastructure expenses.

But when it comes to responsive images, storage is only part of the equation. S3 is not designed for media delivery, so you need an additional service to handle optimization, transformation and CDN delivery.

There are two main approaches:

• You can stay within the AWS ecosystem and combine CloudFront for CDN caching with Lambda functions for on-the-fly transformations. This involves a significant infrastructure to set up and maintain. AWS has a guide on the implementation of such an architecture, which gives a good sense of the setup complexity. That complexity only grows when you want to achieve the best possible compromise between image quality and load speed.
• Or you can use a dedicated image optimization service on top of your S3 bucket.

This guide shows how to optimize and deliver AWS S3 images with TwicPics. It's a simpler yet more performant approach, with all responsive image best practices available out of the box.

Identify the source image URL on AWS S3

The URLs of S3 objects follow a predictable structure. Once you know your bucket name and AWS region, you can construct the URL for any object in the bucket:

https://<bucket-name>.s3.<region>.amazonaws.com/<path-to-file>

For example, my sample AWS S3 bucket is called sneakerfan and it's in the us-east-1 region. My sample images are stored in a folder called /images. The URL of a file named sneakers-1.png from this folder would be:

https://sneakerfan.s3.us-east-1.amazonaws.com/images/sneakers-1.png

You can check an object’s URL directly in the AWS S3 console:

1. Open s3.console.aws.amazon.com and navigate to your bucket.
2. Open the folder where the image is located.
3. Click on the file. In the object's Properties tab, you'll find the Object URL field with the full URL.

Keep note of the base URL of the S3 folder where your image is stored. In my example it is:

https://sneakerfan.s3.us-east-1.amazonaws.com/images/

Granting secure access to images on your private S3 bucket

If your S3 images are publicly accessible, skip this section entirely.

By default, AWS S3 buckets are private. To let an image proxy service like TwicPics retrieve your assets, you need to grant it read-only access using AWS Signature V4 authentication.

There are multiple valid approaches to do that on AWS S3. The steps below walk you through one straightforward way. Adjust to fit your existing roles and policies as needed.

Step 1. Create a read-only IAM policy

Go to IAM. The quickest way is to type IAM in the AWS search bar. Alternatively, open the services menu, navigate to Security, Identity & Compliance, and select IAM.

Create a new policy with the following permissions:

• s3:GetObject
• s3:GetBucketLocation

Scope the policy to the S3 bucket where your images are stored (or a specific folder on that bucket).

To create policy, you can use the Visual Editor or paste the following JSON directly (just replace my example’s bucket’s name sneakerfan with the name of your S3 bucket or the path to the folder on it):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::sneakerfan/*"
        }
    ]
}

Step 2. Create a dedicated IAM user and attach policy

In the left sidebar, go to Access Management > Users and create a new user. Give him a name of your choice (TwicPics User in our example).

Once the user is created, attach the policy you just created to it.

In this way, we have a new user with read-only permission to the folders of your choice on your private S3 bucket.

Step 3. Generate an access key pair

From the user's page, generate an Access Key ID and a Secret Access Key. You'll use these credentials when configuring your TwicPics domain to authenticate against S3.

Setting up TwicPics with your S3 bucket

TwicPics acts as a media proxy. It fetches your originals, applies the required transformations on the fly, caches the results on a global CDN, and delivers the right version to each visitor. Depending on your integration, you can specify transformations manually via the URL API, or let TwicPics automagically resize and optimize each image for the visitor's device and HTML context.

Create an account

Create a free TwicPics account on this link.

Create a workspace

Once logged in, create a workspace. This is where you and your team manage your image delivery settings. Name it after your company or project.

Create a domain within your workspace

This is the host your optimized images will be served from. You can use a TwicPics subdomain:

https://sneakerfan.twic.pics

Create a path to your S3 folder

A path maps a location on your TwicPics domain to the Source URL where your originals are stored.

Let’s look back to the URL of your image stored on AWS S3. Earlier in this guide, we singled out the part before the file name as the base URL of your folder:

https://sneakerfan.s3.us-east-1.amazonaws.com/images/

This is the URL of the asset’s folder on AWS S3. You should use it as the Source URL when connecting TwicPics to your S3 storage.

From your domain's dashboard, click Create path and fill in:

• Path name: in our example we will leave it as root (/) as all your images come from a single source folder. (If you store images in multiple folders, you could create multiple paths to mirror your source structure).
• Source URL: paste the folder URL that we found above:

https://sneakerfan.s3.us-east-1.amazonaws.com/images/

Source Authentication

If your S3 bucket is private (like in our example), you need to tell TwicPics how to authenticate against it. In your path settings, scroll down and open the Source Authentication dropdown and select AWS Signature V4. Then fill in:

• Access Key ID: paste the key generated in Step 3.
• Secret Access Key: paste the secret generated in Step 3.

Save your path. TwicPics will now sign every request to your S3 bucket automatically.

Your path is ready. A request to https://sneakerfan.twic.pics/sneakers-1.png will make TwicPics fetch the original image from https://sneakerfan.s3.us-east-1.amazonaws.com/images/sneakers-1.png and deliver it from its CDN.

Test it

Your image (sneakers-1.png in my example) is now accessible through TwicPics at its TwicPics URL (https://sneakerfan.twic.pics/sneakers-1.png for me)

Open that URL in your browser. You should see your image, already optimized. TwicPics has fetched the original from S3, compressed it, selected the best format for your browser, and delivered it through its CDN. The file in your bucket is untouched.

Try a transformation. Append ?twic=v1/resize=400 to get a 400px-wide version:

https://sneakerfan.twic.pics/sneakers-1.png?twic=v1/resize=400

Or crop to a square:

https://sneakerfan.twic.pics/sneakers-1.png?twic=v1/cover=1:1/resize=500

At this point, your S3 images are connected to TwicPics and ready to be used on your website. The next step is choosing how to integrate them into your frontend.

Using your images on the website

The URL you just tested is already a TwicPics API call. You can chain any number of transformations by appending them after ?twic=v1/, and TwicPics automatically serves the best format the browser supports. This works anywhere you can use a URL: HTML, CSS, API responses, emails, native apps. Here’s the full list of transformations available with TwicPics URL API.

But TwicPics can go much further. With a frontend integration, it understands each user’s CSS context and tailors a perfectly sized and optimized version on the fly.

There are two options for frontend integration:

TwicPics Components are drop-in replacements for <img>, <video>, and <picture> tags, available for React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Gatsby, and as Web Components.

TwicPics Native is a lightweight vanilla JS script for projects without a framework. Add a <script> tag, replace src with data-twic-src, and you're done.