Integrate AWS S3 with ImageKit.io

You can add your existing Amazon S3 bucket as an origin in ImageKit.io. This allows you to use ImageKit.io's real-time optimization, transformation, and streaming features on all existing images and videos stored in the bucket. With this integration, you will also be able to deliver non-media files like JS, CSS, and more.

1. Go to the external storage section in your ImageKit.io dashboard, and under the External Storage section, click on the "Add new" button.
2. Choose Amazon S3 from the origin type dropdown.
3. Give your origin a name. It will appear in the list of origins you have added. For example - Product images bucket.
4. Fill out the S3 bucket name.
5. Specify the S3 bucket folder in which your files are present. If you must access files at the root (i.e., present directly in the bucket and not inside a folder), enter /.
6. Fill out the S3 access and secret keys. These keys should provide read-only access to ImageKit.io, as explained below.
7. Leave the advanced options as it is for now.
8. Click on the Submit button.

Note that you need to provide permission for the operation s3::GetObject on the objects in your bucket. The minimal permission policy should look like the one below. Please change the bucket name to that of your bucket.

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

If you are not sure about how to create this policy in the AWS console and need a step-by-step guide with screenshots, check out this blog post.

When you add your first external source (origin) in the dashboard, the origin is, by default, made accessible through the default URL endpoint of your ImageKit.io account. For subsequent origins, you can either create a separate URL endpoint or edit the existing URL endpoint (including default) and make this newly added origin accessible by editing the origin preference list.

So when you request

https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg,

ImageKit.io internally accesses the object at path rest-of-the-path.jpg in your bucket.

            URL endpoint                transformation      file path
┌─────────────────────────────────────┐┌─────────────┐┌───────────────────┐
https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg

Let's look at a few examples to fetch an image file. The same would work for other file types as well.

• Original image through S3 bucket (old URL)
  https://s3.amazonaws.com/bucket_name/rest-of-the-path.jpg
• The same master image using ImageKit.io URL endpoint
  https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg
• Resized 300x300 image with transformation as path parameter
  https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg
• Resized to 300x300px with transformation as query parameter
  https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?tr=w-300,h-300

If you get a "Not found" error while accessing the file, check out this troubleshooting guide.

Start using ImageKit.io URLs in your application to deliver perfect images and videos.

• Checkout quick start guides for different technologies.
• Apply transformations to deliver the perfect visual experience.
• Learn how to optimize images & videos for web delivery.
• Refer to production checklist before going live.

If you’ve configured an S3 bucket as an origin and the bucket has objects with special characters, ImageKit might not be able to fetch files with such names and return a 404 Not Found response. For example, if the key in S3 is image%2Bexample.jpg, it may not work with ImageKit.

To overcome this, add your S3 bucket as a Web Server origin with the Base URL as the S3 bucket URL(usually https://bucketname.s3.amazonaws.com). Map this origin to the same endpoint where you've already added the S3 bucket as an origin after the S3 bucket.

After doing this, your endpoint mapping should contain the S3 bucket (with native integration to S3) followed by the S3 bucket added as a Web Server.

When enabled, the response contains a Link header with the appropriate URL and rel=canonical. You will have to specify the base URL for the canonical header.

For example, if you set https://www.example.com as the base URL for the canonical header, then the response for URL https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg will have a Link header like this:

Link: <https://www.example.com/rest-of-the-path.jpg>; rel="canonical"