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.
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
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
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
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
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
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
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 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
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
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!
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. 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.
That’s it! For a full list of transformation options, as well as doing cool things like Named Transformations , please read the ImakeKit Docs.
I hope you found this tutorial useful. For more great information and new, please visit Our Blog.
Top comments (0)