Image conversion using AWS serverless image handler
☁️

Image conversion using AWS serverless image handler

Created
Oct 29, 2022 12:55 PM
Department
Engineering
Category
Well Documented
Technology
AWS
Tags
Date
URL

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.

image

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: