This is a simple example of how to use AWS Lambda to resize images on the fly using Amazon CloudFront.
- 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.
Add query parameters. that's it.
- width
- height
- format ('auto' option check accept request header)
- quality (0~100, default: 100)
- https://your-domain/images/hangang-river.jpeg?width=1100 (940KB)
- https://your-domain/images/hangang-river.jpeg?width=1100&format=webp (658KB)
- The user requests an image from CloudFront.
- CloudFront forwards the request to the Lambda function.
- The Lambda function resizes the image and returns it to CloudFront.
- CloudFront caches the image and returns it to the user.
- The next time the same image is requested, CloudFront returns the cached image.
- If the image is updated, the cache is invalidated and the process starts over.
- The Lambda function is only invoked when the image is requested for the first time or when the cache is invalidated.
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
