CloudFront Functions is a feature of CloudFront that allows you to write lightweight functions in JavaScript for high-scale, latency-sensitive CDN customizations. Before passing the request upstream, a CloudFront Function is executed on viewer request event to rewrite the request URL. The request is processed by a nearby CloudFront edge location providing the best performance.The transformations are encoded in the URL, more precisely as query parameters. The user sends a HTTP request for an image with specific transformations, such as encoding and size. The request flow is explained in the next diagram: The architecture is based on S3 for storage, CloudFront for content delivery, and Lambda for image processing. Both transformations can be requested by the front-end, with the possibility of automatic format selection done on server side. The available transformations include resizing and formatting, but can be extended to more operations if needed. Image transformation is executed centrally in an AWS Region, only when the image hasn’t been already transformed and stored. The proposed architecture is suitable for most common use cases. When do we execute the transformation? Every time or do we store transformed images for a short duration? Is it synchronously or asynchronously executed?.Where do we execute the transformation? In a central location or in a distributed way?.Where do we decide which transformation to be applied for a specific image request? In the front-end on the client-side (static, responsive design, etc.), on the server side (based on request content such as device) or combination of both?.What image transformations are needed? Is it formatting, resizing, cropping, etc.When architecting an image optimization solution, you need to make the following technical decisions: Image optimization architectureĪn image optimization solution can be architected in a variety of ways, based on your requirements in terms of cost, flexibility, and performance. Then, we illustrate this solution in a sample web page built using Next.js, a popular framework used by developers to build websites. In the blog post, we provide you with a simple and performant solution for image optimization using serverless components such as Amazon CloudFront, Amazon S3 and AWS Lambda. For example, Google’s Largest Contentful Paint metric in their search ranking algorithm is highly impacted by how much you optimize the images on your website. Optimizing images on your website is critical to improve your users’ experience, reduce delivery costs and enhance your position in search engine ranking. Images are usually the heaviest components of a web page, both in terms of bytes and number of HTTP requests. Image Optimization using Amazon CloudFront and AWS Lambda
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |