They are created with the same key as the original image in addition to a suffix based on the normalized image transformations. Ideally, you’d set this value according to the duration after which the number of requests to a new image drops significantly. The transformed image is stored in S3 with a lifecycle policy that deletes it after a certain duration (default of 90 days) to reduce the storage cost.When invoked, the Lambda function downloads the original image from another S3 bucket, where original images are stored, transforms it using Sharp library, stores the transformed image in S3, then serve it through CloudFront where it will be cached for future requests. Thanks to this native feature, CloudFront retries the same URL but this time using the secondary origin based on Lambda function URL. Otherwise, S3 will respond with a 403 error code, which is detected by CloudFront’s Origin Failover.If the requested image is already transformed and stored in S3, then it is simply served and cached in CloudFront. If the Image is not in CloudFront cache, then the request will be forwarded to an S3 bucket, which is created to store the transformed images. To increase the cache hit ratio, we enable Origin shield, a feature of CloudFront that acts as an additional layer of caching before the origin, to further offload it from requests. If the requested image is already cached in CloudFront then there will be a cache hit and the image is returned from CloudFront cache.For example, if the user asks for the most optimized image format (JPEG,WebP, or AVIF) using the directive format=auto, CloudFront Function will select the best format based on the Accept header present in the request. When an automatic transformation is requested, the function also decides about the best one to apply. In our architecture, we rewrite the URL to validate the requested transformations and normalize the URL by ordering transformations and convert them to lower case to increase the cache hit ratio. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |