aws-cloundfront-lamda-image-resizer

This is a simple example of how to use AWS Lambda to resize images on the fly using Amazon CloudFront.

Why use this?

• Low-resolution images on high-resolution displays create a bad user experience.
• High-resolution images on low-resolution displays waste bandwidth, device, and server resources, especially when using a framework that adopts images in-app and crops or resizes images, making the app heavy.

How to use

Add query parameters. that's it.

• width
• height
• format ('auto' option check accept request header)
• quality (0~100, default: 100)

Request image example

• https://your-domain/images/hangang-river.jpeg?width=1100 (940KB)
• https://your-domain/images/hangang-river.jpeg?width=1100&format=webp (658KB)

How it works

1. The user requests an image from CloudFront.
2. CloudFront forwards the request to the Lambda function.
3. The Lambda function resizes the image and returns it to CloudFront.
4. CloudFront caches the image and returns it to the user.
5. The next time the same image is requested, CloudFront returns the cached image.
6. If the image is updated, the cache is invalidated and the process starts over.
7. The Lambda function is only invoked when the image is requested for the first time or when the cache is invalidated.

AWS setup

Create lamda function (choose us-east-1 for using cloudfront response trigger)

Create clound9 for writing lamda function source code

Write lamda function

Write code (See this repository source code)

Upload Lamda

Select "Directory" -> "No" -> Select proejct folder -> Open (just few minutes left, it will show complete message toast)

Add Trigger

Deploy