aws-cloudfront-lambda-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 checks the 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.

How to test

1. Build the Docker image:

docker build -t lambda-image-resizer .

2. Create a directory to store test images and run the Docker container:

mkdir -p test-images
docker run -it -v $(pwd)/test-images:/app/test-images lambda-image-resizer /bin/sh

3. After accessing the container, you can run the test as follows:

aws-lambda-local -l index.mjs -h handler -e test-event.json

Configuration

• Modify the following environment variables in the Dockerfile if needed:
  • AWS_REGION: AWS region
  • S3_BUCKET: S3 bucket name
  • If AWS credentials are required, uncomment the relevant section and provide the values.
• To test with actual images, place test image files in the test-images directory and update the URI path in test-event.json to match the image file path.

This test environment allows you to test the Lambda function's image processing logic locally without connecting to actual AWS resources. To connect to a real S3 bucket, set up appropriate AWS credentials.

AWS setup

Create a Lambda function (choose us-east-1 to use the CloudFront response trigger)

Create a Cloud9 environment for writing the Lambda function source code

Write the Lambda function

Write the code (See this repository's source code)

Upload the Lambda function

Select "Directory" -> "No" -> Select the project folder -> Open (after a few minutes, a completion message will appear)

Add a Trigger

Deploy