Learn how to optimize website performance by converting images to WebP format using Amazon CloudFront and S3, improving load times and user experience.
Related Blog Posts
Amazon Pinpoint to Amazon Connect Migration Made Simple
Learn how to migrate from Amazon Pinpoint to Amazon Connect while preserving operational continuity and reducing risk to existing customer experiences.
Migrations
Transforming Citizen Services: How a Major Federal Agency Modernized Its Contact Center in 60 Days
Learn how we helped a major federal agency modernize its contact center by migrating to Amazon Connect in just 60 days.
Customer Experience Transformation
Migrations
Public Health Data Provider Accelerates Sales and Compliance Through AWS Cloud Migration
Discover how we helped a public health data provider migrate to AWS to drive sales growth and strengthen regulatory compliance.
Carlos Espin is a Senior Cloud Software Architect in the Cloud Native Applications practice at Caylent. Carlos grew up in La Guaira, Venezuela where it is normally around 40 degrees Celsius and now lives in Montreal, Canada where it is sometimes around -40 degrees Celsius. He is a father of two and a husband to one. He jokes more than he should and is passionate about the craft of technology architecture and the mindset that comes with it. His favorite books are "Thinking in Systems: A Primer" by Donella Meadows and "Cien años de soledad" by Gabriel G. Marquez. When he is not busy trying to find equilibrium between business, technology, and people he is snowboarding or thinking about the mechanics of existence.
Website performance has a direct impact on user retention and conversion rates. Increasing brand promotion, reducing rendering times, and simply helping the browser give quick visual feedback to the user is a never ending optimization task. You have around 3 seconds to display content before the user leaves for a different site.
If you run a web app performance tool, like Lighthouse, against your site you will receive a performance score along with a breakdown of potential improvements. Specifically for images, Lighthouse will suggest migrating any JPEG or PNG assets in the website to a more modern format like WebP. In the example below you can see the potential savings that image compression would provide.
Migrating assets to WebP and realizing these potential savings sounds great. So where do we start?
A better way to deliver images
In this blog, we will describe how to implement the conversion to WebP and how Amazon CloudFront and Amazon S3 can be configured to optimize and cache any website asset in order to gain web performance, improve image delivery, and give your users an accelerated experience.
For this blog post, we’ll use the following reference implementation to explore each step of the process in detail. When you’re ready to implement this on your site see the repo here.
Let’s walk through the chain of events triggered when a user clicks a link on your site.
Initial Request
First, the browser is checked for WebP support. After that support is confirmed, it appends the query string transform=ABC to the HTTP request when fetching the asset cat.jpg.
Then Amazon CloudFront executes an origin request (a Lambda@Edge function) to determine if a transformation was requested. If a transformation is needed it will mutate the S3 key to fetch the correct object from Amazon S3.
The Lambda@Edge function tells Amazon CloudFront to use transform=ABC/cat.jpg rather than cat.jpg as a S3 key as indicated in the code snippet #1
Failed Request and Image Conversion
The original request through Amazon CloudFront tries to fetch the S3 key transform=ABC/cat.jpg from the S3 bucket, but does not find it because it hasn’t been produced yet. Based on this failed response Amazon CloudFront executes an origin response Lambda@Edge function to try to convert the failed response from S3 into a resized image. The origin response Lambda@Edge function directs the requested transformation ABC to a specific Amazon S3 Object Lambda access point and fetches the cat.jpgS3 key through it as indicated in the code snippet #2.
Amazon S3 Object Lambda executes an AWS Lambda function to transform the image cat.jpg using the reference transformation ABC.
Storing in S3 for Future Reuse and Delivering the Image
The AWS Lambda function will keep a copy of the transformed image in the S3 bucket for the next time that Amazon CloudFront needs it. But to help the origin response Lambda@Edge function finish its execution, it saves it after delivering the optimized asset to Amazon S3 Object Lambda.
The origin response Lambda@Edge function embeds the optimized image bytes into the response object that it will return to Amazon CloudFront as indicated in the code snippet #3.
Amazon CloudFront returns the resized image to the browser with a Cache-Control HTTP header that will instruct it to cache the asset for a long time while Amazon CloudFront will also cache it for as long as its cache policy allows it.
If it is fetched from this updated URL which uses the query string transformation-template = webp-20230802-460 to optimize the delivery of a transformed image, a significant reduction in size can be seen.
The original image weighs 727,763 bytes versus the transformed image weighing only 16,730 bytes. This significant reduction means that the 700,000+ bytes that weren’t delivered to your user will speed up the user experience every single time that asset is requested.
With today’s modern technology that includes screaming fast WiFi and gobs of RAM in every device it may feel like the need for image optimization has become less important. However, as the example above shows, you can measurably and significantly speed up image delivery on your site and have a direct impact on the browsing experience for your users.
Carlos Espin
