.png)
Simplify Serving Dynamic Image Sizes with AWS Serverless Technology
A simple, efficient, and cost-effective solution to manage images dynamically using the AWS Serverless Image Handler.
Introduction
Serving same image at different resolutions at scale can be challenging to implement, especially when multiple formats are required and the request volume is large. Traditional batch processing methods, which asynchronously process and store images, are not only time-consuming and inefficient but also come with several drawbacks:
High Storage Requirements: Storing multiple versions of each image significantly increases storage needs.
Long Processing Times: Long processing periods delay the availability of images.
Manual Intervention: Continuous effort is required to manage and update batch processing scripts.
Poor Scalability: As the volume of images grows, system maintenance becomes increasingly challenging.
Faced with these issues, our client came to us for a better solution. They needed to serve images in various resolutions and formats, such as:
Thumbnail:
/images/photo.png?w=150&h=150Medium:
/images/photo.png?w=300&h=300Large:
/images/photo.png?w=600&h=600
We leveraged the AWS Serverless Image Handler, to provide a simple, efficient, and cost-effective solution to manage images dynamically.
What we did
We implemented the AWS Serverless Image Handler, leveraging AWS’s serverless technologies to dynamically resize and serve image. Here’s the workflow:
Client Request: The client sends an HTTP request specifying required image dimensions (e.g., /image.png?w=300).
AWS Web Application Firewall (WAF) Protection: This request is secured by AWS WAF, to protect against common web exploits.
CloudFront Distribution: The request is directed to CloudFront, AWS’s Content Delivery Network (CDN), which caches the image to minimise latency and improve retrieval efficiency (load times).
Viewer Request Lambda@Edge: Triggered by CloudFront’s “viewer request” event, this function reformats the URI into a valid S3 key expected by the S3 bucket. (e.g.,
/image.png?w=300to/300/image.avif).S3 Bucket Access: CloudFront uses an Origin Access Identity to securely access the S3 bucket, which stores both the original and resized images.
Image Retrieval: If the resized image is available in the S3 bucket, CloudFront immediately retrieves it and sends to the client.
Origin Response Lambda@Edge: If the resized image is not found, this Lambda function checks for the original image in the S3 bucket. If found, it resizes the original image, stores it back in the S3 bucket, and returns it to the client. If the original image is not found, it returns a 404 error.
Image Processing: The Lambda function processes and saves the resized image back to the S3 bucket for future requests.
Image Delivery: The resized image is delivered to the client, ensuring quick and efficient access.
This architecture minimizes manual intervention and ensures scalability, efficiently processing and delivering images as demand increases.
Architecture
.png)
Key Components & Data + Interaction Flow
1. Amazon CloudFront: Acts as the content delivery network (CDN) to distribute images to end-users with low latency.
- Key Feature: Caches content at edge locations to minimize access times and network traffic to the origin.
2. Amazon API Gateway: Manages incoming API requests, providing an entry point for clients to interact with backend services.
- Key Feature: Offers capabilities such as traffic management, authorization and access control, monitoring, and API version management.
3. AWS Lambda: Executes code in response to events (e.g., HTTP requests via API Gateway) without provisioning or managing servers.
- Key Feature: Can run code at AWS Edge locations (Lambda@Edge) to bring computation closer to end users for lower latency.
4. Amazon S3 (Simple Storage Service): Provides scalable object storage for data and images in this context.
- Key Feature: Ensures high durability and availability, serving as the backbone for storing both the original and processed images.
5. AWS Secrets Manager: Manages access to sensitive information such as API keys or database credentials that are needed by the applications.
- Key Feature: Helps in securing and rotating credentials automatically, reducing the risk of outdated or exposed credentials.
6. Amazon Rekognition: Adds image and video analysis capabilities using machine learning to automatically identify objects, people, text, scenes, and activities.
- Key Feature: Enhances the application by enabling advanced image processing and analysis tasks beyond basic resizing or cropping.
Conclusion
AWS’s Serverless Image Handler provided our client with a scalable and cost-effective solution for dynamic image resizing. Here are the key benefits:
Dynamic Image Handling: Images are automatically resized, cropped, and edited at the edge, significantly reducing manual effort and processing time.
Cost-Effective and Scalable: Pay only for the resources you use. The solution scales seamlessly with your needs without requiring additional infrastructure, optimizing cost-efficiency.
Quick Implementation: Deployment is facilitated using AWS’s pre-built CloudFormation template, enabling rapid integration into existing systems.
Are You Ready to Optimize Your Image Management?
Streamline your image management workflow and enhance your cloud infrastructure with KubeOps Consulting. Let us help you simplify operations and achieve your goals. Reach out today!
.png)
