- Brief
- Serverless Image handler
- Convert an Image from .jpg/.png to .webp
- What is Webp?
- References
- Steps for the image conversion
- Step 1: Creating an S3 bucket
- Step 2: Creating cloud formation
- Usage:
Brief
What is the document for?
This document explains how to convert images from .jpg/.png to .webp
Serverless Image handler
This solution creates a serverless architecture to initiate cost-effective image processing in the AWS Cloud. The architecture combines AWS services with Sharp open-source image processing software and is optimized for dynamic image manipulation. The solution provides dynamic image handling to help maintain high-quality images on your websites and mobile applications to drive user engagement.
Convert an Image from .jpg/.png to .webp
What is Webp?
The WebP format has become increasingly popular since Google introduced it in 2010. Its biggest selling point lies in its ability to produce much smaller file sizes while maintaining similar image quality. Faster load times = higher conversion rates.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at an equivalent SSIM quality index. — Google
References
Steps for the image conversion
Step 1: Creating an S3 bucket
First, Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/. Create a new S3 bucket with public access.
Reference to create S3 bucket: https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-bucket.html
Step 2: Creating cloud formation
In this step, we are going to upload the AWS cloud formation template to automate the deployment of the Serverless Image Handler solution in the AWS Cloud. It includes the following AWS CloudFormation template, which you can download before deployment:
Reference:
Open the cloud formation console at https://console.aws.amazon.com/cloudformation/.
Creating a new stack:
- Step 1: Specify the Template
- Prerequisite - Prepare Template: choose the Template is ready
- Specify Template: choose to Upload a template file
- Upload the downloaded serverless-image-handler.template file
- Go to the next step
- Step 2: Specify stack details
- Stack name: Enter the stack name
- Parameters: Just change the mentioned options here; other options keep as it is
- CORS Options:
- CORS Enabled: select yes
- Image Sources:
- Source Buckets: Your S3 bucket name
- Demo UI: select No
- Auto Webp: select yes
- Step 3: We aren't changing any options here; if you need some specific options to be enabled here, you can enable them.
- Step 4:
- Capabilities:
- Check ✅ I acknowledge that AWS CloudFormation might create IAM resources.
- Check ✅ The Template has changed.
- Create stack The Creation will take a few minutes to set up.
After the stack is created, go to the outputs tab there, and you can see the API endpoint URL. Use that Url to hit the S3 images.
Usage:
- Normal S3 URL: https://fes-cdn.s3.amazonaws.com/assets/category-card/against-whom-category.jpg
- Converting jpg to webp: Add the filter - filtersformat(webp) to the Cloud front URL: https://dhn3tko1o6cib.cloudfront.net/filtersformat(webp)/assets/category-card/against-whom-category.jpg
- Not only webp filter, there are other supported filters we can use:
- List of supported filters: https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/thumbor-filters.html
❌ We can't pass filterformat to SVG images.