DEV Community

Cover image for Create your own Image CDN using AWS CloudFormation and AWS Lamda
Ahmed Adel for AWS Community Builders

Posted on • Updated on

Create your own Image CDN using AWS CloudFormation and AWS Lamda

➥ In this article, I will demonstrate how to create your own Image CDN in a few simple steps using AWS CloudFormation and AWS Lamda (Serverless).

➥Before we dig in the tutorial, let's talk briefly about IMAGE CDNs

● What is Image CDN and why to use it ?

➥ Image content delivery networks (CDNs) are used for optimizing images, or in another words, load images with the best possible optimized size in its placeholder in a website.
➥ This approach increases website performance and speed.
➥There is a lot of third party CDNs you can use like ImageKit, Cloudinary, Bunny CDN and much more ...

But today, I'll be talking about creating your own Image CDN:

1- Download Serverless Image Handler CloudFormation Template.
2- Login to your AWS Console, Go To AWS CloudFormation Page.
3- Select Create Stack > with new resource
Create_Stack
you will then be redirected to create stack page.

4- In Prepare template section select Template is ready,
In Specify template select Upload a template file, and then upload the template file you previously downloads then click next

Create_Stack_page1
5- In Specify stack details page, just enter a name for your stack , let's assume we named it My-New-Demo-CDN and then in Image Sources field, here you should enter all the S3 Bucket names that will be the original source of the images will be uploaded (the images with the highest quality that will be resized later by the Lamda function depending in the requested size)

Image description
then hit next ...

6- In Configure stack options, you can enter any tag you want for the resources or leave it empty, no need to get into advanced details at the moment, click next

Image description
7- You will be directed to the Review My-New-Demo-CDN, where you will review all the options you previously selected for the stack like template, parameters, stack options, permissions, policy ...etc.

Image description

  • Check I acknowledge that AWS CloudFormation might create IAM resources and hit Create Stack.

8- Creating process will start and it will take a few minutes to finish ...

Image description

9- Then you will notice that all resources are ready and your CDN create status will be Create Complete.

stack_ready

10- Navigate to Outputs Tab, you will notice that an API End Point has been created for your stack to use, in our example it is https://r3fy67sunclsio8y5.cloudfront.net, this link is the link that will replace your image bucket url.

get_cdn_url

**Now your CDN is created and ready to use ...


How To Use it ?

1- Let's first upload an cute cat image with high quality to one of the buckets that we assigned as an image source for the CDN, don't forget to allow public access on uploading this image to be able to use it from the browser.

Image description

then we can view this image from the browser from its public url

Image description

As we can see, the url consists of 2 parts:
a- Base Bucket URL https://default-bucket-test-image-cdn.s3.eu-west-3.amazonaws.com/
b- image path in the bucket cute-cat-4k-wg.jpg

Also notice that the image is loaded with its full size when you open it in the browser

Image description

So, what if I need to use this image multiple time in my website, once as a thumbnail, other time in 300x300 size and other one with its full size, is it logical to save it in my storage three times with three different sizes , or may be load it each time with the full size ? 🤔

2- Here will come the magic 🧙🏻 of the CDN, let's replace the bucket URL with our previously created CDN URL , and just enter a size for the image so that our link will be
https://r3fy67sunclsio8y5.cloudfront.net/300x300/cute-cat-4k-wg.jpg
and notice what happens

Image description

Our image is now resized to 300x300 and only 21Kb is loaded to the browser instead of 3.1 Mb 🤯🤯.
Try it with other sizes and see the magic yourself ...


Actually, this CDN is not limited only to resizing ....

✅ it also extends the functionality of many of the Thmbor Filters to allow you to set background color, blur, grey scale, image type, image format, quality, crop, rgb, sharpen upscale , setting watermark and other filters ...
check the table below for the list of filters

Filter Name Filter Syntax
Autojpg /filters:autojpg()/
Background color /filters:background_color(color)/
Blur /filters:blur(7)/
Color fill /filters:fill(color)/
Convolution /filters:convolution(1;2;1;2;4;2;1;2;1,3,false)/
Equalize /filters:equalize()/
Grayscale /filters:grayscale()/
Image format (heic, heif, jpeg, png, raw, tiff, webp) /filters:format(image_format)
Image type (jpeg, png, gif) /filters:format(jpeg)/
No upscale /filters:no_upscale()/
Proportion /filters:proportion(0.0-1.0)/
Quality /filters:quality(0-100)/

for example, our link will be like:

  • https://r3fy67sunclsio8y5.cloudfront.net/fit-in/500x500/cute-cat-4k-wg.jpg for resizing
  • https://r3fy67sunclsio8y5.cloudfront.net/fit-in/500x500/filters:blur(7)/cute-cat-4k-wg.jpg for resizing then blurring the image
  • https://r3fy67sunclsio8y5.cloudfront.net/fit-in/500x500/filters:quality(50)/cute-cat-4k-wg.jpg for resizing then reducing quality to 50% and so on for all the filters

Archeticture of this CDN:

Image description

Cost of this CDN:

➥ You are responsible for the cost of the AWS services used while running this solution. As of December 2021, the estimated cost for running the Serverless Image Handler solution with an AWS Lambda processing time of two seconds per image, where each image is approximately 1 MB in size, and default settings in the US East (N. Virginia) Region is $15.29 per month for 100,000 new images, $149.30 per month for 1,000,000 new images, and $744.91 per month for 5,000,000 new images (refer to the following table for the cost breakdown). This includes estimated charges for Amazon API Gateway, AWS Lambda, Amazon CloudFront, Amazon S3 storage, and AWS Secrets Manager.

Cost to process # of new images per month
AWS service 100,000 1,000,000 5,000,000
Amazon API Gateway $0.35 $3.50 $17.50
AWS Lambda (2 seconds processing time per image) $3.35 $33.53 $167.67
Amazon CloudFront (process 1 MB images per request) $8.40 $84.01 $420.04
Amazon S3 (store 1 MB images) $2.29 $22.86 $114.30
AWS Secrets Manager* $0.90 $5.40 $25.40
Total monthly cost: $15.29 $149.30 $744.91

For a full documentation of this solution, please visit the official documentation

Discussion (4)

Collapse
yongchanghe profile image
Yongchang He

Thank you for sharing such detailed information about the picture processing tool in AWS.

Collapse
ahmedadel profile image
Ahmed Adel Author

You are welcome :)

Collapse
duyquocnguyen profile image
duyquocnguyen

Thank you and I have a question, I have upload a video with .mp4 and I can't into. Maybe this is error with api gateway. But I don't know modyfi them.

{"status":400,"code":"RequestTypeError","message":"The type of request you are making could not be processed. Please ensure that your original image is of a supported file type (jpg, png, tiff, webp, svg) and that your image request is provided in the correct syntax. Refer to the documentation for additional guidance on forming image requests."}

Collapse
ahmedadel profile image
Ahmed Adel Author

This CDN is for resizing images only, it does not support image files.