Create a Free Image Resizing CDN Using Amazon S3 + ImageKit.io
Tags: imagekit, s3bucket, cdn, amazonwebservices
Published: 2022-05-20 02:40:59

---
title: Create a Free Image Resizing CDN Using Amazon S3 + ImageKit.io
published: true
date: 2022-04-11 03:33:16 UTC
tags: imagekit,s3bucket,cdn,amazonwebservices
canonical_url: https://blog.designly.biz/create-a-free-image-resizing-cdn-using-amazon-s3-imagekit-io
---

![Featured](https://cdn-images-1.medium.com/max/1024/1*spS2vnqHEr73ivWbTxpTOQ.jpeg)

No longer is the realm of CDNs and automated image resizing accessible only to large corporations with deep wallets. Both Amazon Web Services and ImageKit.io have free-tier plans. And using these services, I will show you how to create an image-optimizing and -resizing CDN using these two services in conjunction.

### Step 1: Create an AWS Account and an S3 Bucket

I’ll assume you can figure out how to register an Amazon Web Services account on your own. Don’t be discouraged by the need to give a credit card. Your card will not be charged unless you exceed free-tier limits, and the free-tier limits for an S3 bucket are exceedingly high. Also, if you do go over your quota, you only pay as you go and the rates are very low.

For more information on Amazon’s pricing for the Simple Storage Service, [click here](https://aws.amazon.com/s3/pricing/?trk=fecf68c9-3874-4ae2-a7ed-72b6d19c8034&sc_channel=ps&sc_campaign=acquisition&sc_medium=ACQ-P%7CPS-GO%7CBrand%7CDesktop%7CSU%7CStorage%7CS3%7CUS%7CEN%7CText&s_kwcid=AL!4422!3!488982706710!p!!g!!amazon%20s3&ef_id=Cj0KCQjwgMqSBhDCARIsAIIVN1VFc6BOx1NUqzpmit98PzXU0VI-CkNwfrF6gnXtWdQlOBIftCwoXbAaAkafEALw_wcB:G:s&s_kwcid=AL!4422!3!488982706710!p!!g!!amazon%20s3).

OK, so hopefully you now have an AWS account and your at your dashboard. Now we can create an S3 bucket, which we will use to store our image files.

Click the **Services** icon on the top right of the dashboard and select **Storage->S3**.

![Click the Services icon on the top right of the dashboard and select Storage->S3](https://cdn-images-1.medium.com/max/1024/1*zyTZYKHWkB_00Od9u82d7g.jpeg)
_Click the Services icon on the top right of the dashboard and select Storage->S3_

Next, enter a **Bucket Name** and choose your **AWS Region**. If you don’t already have other AWS services in a region, choose a region that this geographically close to you.

![Enter a Bucket Name and choose your AWS Region](https://cdn-images-1.medium.com/max/1024/1*T2s_N7bN4da3N3xvNEB3jQ.jpeg)
_Enter a Bucket Name and choose your AWS Region_

Now scroll down and uncheck **Block _all_ public access**. Then check the **“I Acknowledge”** checkbox to continue. Leave all the other settings as-is and then scroll down and click **Create Bucket**.

![Scroll down and uncheck Block all public access](https://cdn-images-1.medium.com/max/1024/1*oa0q7Sk_0d-dv72qpfJWLw.jpeg)
_Scroll down and uncheck Block all public access_

OK, now we need to setup external access to the S3 bucket so ImageKit.io can access it as an external origin for your CDN edge.

In the **Search Bar** next to the **Services** icon type in **_Iam_** and then click **Users** under  **IAM**.

![In the Search Bar next to the Services icon type in Iam and then click Users under IAM](https://cdn-images-1.medium.com/max/1024/1*_uWwBAPIXq5OrivXHkqBRQ.jpeg)
_In the Search Bar next to the Services icon type in Iam and then click Users under IAM_

Then click **Add Users** and enter a username. Then check the box labeled **Access key** under **Select AWS credential type**.

![Click Add Users and enter a username. Then check the box labeled Access key under Select AWS credential type](https://cdn-images-1.medium.com/max/1024/1*P34OH39glKpYtxKG0CcCng.jpeg)
_Click Add Users and enter a username. Then check the box labeled Access key under Select AWS credential type_

Next, you’ll need to add your new user to a group. We’re going to **Create Group.** Name the group whatever you like and the type **S3** in the search baar and check **AmazonS3FullAcess**. This will give this group full access to your S3 bucket for managing objects.

![Click Add User To Group and then search for S3 and check AmazonS3FullAccess](https://cdn-images-1.medium.com/max/1024/1*Qf1fYfMKmWVKB-iQmOsMjw.jpeg)
_Click Add User To Group and then search for S3 and check AmazonS3FullAccess_

Click next, skip adding tags and then click **Create User**. Now copy and paste your **Access key ID** and **Secret access key** and store them in a safe place. Once you close this screen you will not be able to see your secret key again!

### Step 2: Create an ImageKit.io Account

Head to [ImageKit.io](https://imagekit.io/registration?code=tkda4404) and create your free account. This service does not require a credit card for a free-tier account, so yay! Also, FYI: Please use the link I provided as it has my affiliate link attached. If you decide to upgrade to a paid plan, I get $20 and you get $10. But you’ll probably be staying with a free account unless you want to activate some advanced features. One feature you may want to use in a paid plan is caching of resized files between your ImageKit CDN edge and your S3 bucket.

OK, so now you have an ImageKit.io account, now we’ll need to create an **External Origin**. Click **External Storage** on the left sidebar and then click **+ Add New**.

![Click External Storage on the left sidebar and then click + Add New](https://cdn-images-1.medium.com/max/1024/1*IBQHz7RA1-g1-wZ5PIEsUA.jpeg)
_Click External Storage on the left sidebar and then click + Add New_

Next, enter a friendly **Origin name** , and then enter your **S3 bucket name** , **S3 access key** , and **S3 secret key**. Hopefully you saved your keys in a safe place! For **S3 bucket folder** , you can simply enter “/”. If you want to set your root directory to a specific folder, you can.

![Enter your S3 bucket name, S3 access key, and S3 secret key](https://cdn-images-1.medium.com/max/1024/1*-0tA_fG612zzicv9PwpBqQ.jpeg)
_Enter your S3 bucket name, S3 access key, and S3 secret key_

Now copy and paste your **URL Endpoint** into a new browser tab and type the relative path to your image file after the slash. You should see your image! Great! Now you’re images are being served by a super-fast CDN edge!

![](https://cdn-images-1.medium.com/max/1024/1*fo-R0jLU2U_5fnSiDmlhMw.jpeg)

Now, if you want to retrieve a resized image from your CDN, you simply have to prepend a path to your file as follows:

Let’s say your image endpoint URL is [https://ik.imagekit.io/r2d98yeyh9/images/some-image.jpg.](https://ik.imagekit.io/r2d98yeyh9/images/some-image.jpg.) Now let’s say we want to resize the width to 500 pixels. We simply do this: [https://ik.imagekit.io/r2d98yeyh9/images/tr:w-300/some-image.jpg](https://ik.imagekit.io/r2d98yeyh9/images/some-image.jpg.).

That’s it! For a full list of transformation options, as well as doing cool things like **Named Transformations** , please read the [ImakeKit Docs](https://docs.imagekit.io/features/image-transformations).

I hope you found this tutorial useful. For more great information and new, please visit [Our Blog](https://designly.biz/blog).

* * *