Dynamic Image Transformation for Amazon CloudFront

Key Takeaways

Our website needs to serve images fast across all devices. Three sprints later, you're deep in a rabbit hole managing five different versions of the same image, watching your storage build climb, and manually tweaking the image processing code every time there's a new device requirement. But did you know AWS offers a solution that eliminates these challenges while optimizing your costs and saving time? With the solution, you only need to store one highquality original image. All those different sizes and formats are created on the fly only when needed. Your storage costs go down. your images load faster and you don't have to write any image processing code. Plus, setting it up is straightforward. It's right here on this page and I'm going to show you how it works and how you can easily deploy it. One, prepare US3 buckets where your original images are stored. Two, deploy those solutions using cloud form or CDK. You can also, of course, customize it for your needs. Third, update your image URLs to use your new CloudFront domain and add the parameters you want. With this solution, your application makes a request for an image through CloudFront, but instead of just asking, for example, for product.jpeg, it asks for something like this using a simple URL parameters. A CloudFront function caches this requests and makes sure it's formatted correctly. If this exact version hasn't been created before, then the solution will retrieve your original image either through API gateway or lender function from S3 and transform it right there at the edge. It can resize it, change the format, whatever you need. And you can even turn on smart cropping with recognition or add security with signed URLs. Finally, CloudFront caches the transform version at edge locations around the world. So the next time someone needs the same size or format, it's lightning fast. Want to try it out? Head over to the caption for the link. And as always, happy