Resize Images On-the-Fly With S3, Lambda, and API Gateway

Feature Request
#1

I have been looking for solutions to serve optimized images using a CDN when I stumbled on this article:

Reasons for wanting a better delivery of images are best outlined in this article:

What Is Image Optimization And Why Is It Important For A Website?.

How great would it be to be able to use:

<img
 srcset="
  {BUCKET}/600x600/theshot.jpg 600w,
  {BUCKET}/1000x1000/theshot.jpg 1000w,
  {BUCKET}/3000x3000/theshot.jpg 3000w
 "
 src="{BUCKET}/600x600/theshot.jpg"
>

by storing just the one image and serving an optimized image via a CDN.

How do you setup responsive images for IOS and Android?
Preview Crop
#2

Got a great update on this @ben

Open AWS CloudFormation and use a template for image resizing to create the stack, point to your bucket containing the images you want, and point to the api endpoint, which is generated once the template is deployed and ready (takes a couple of minutes), then all you have to do is include the dimensions you want in the query:

Example:
https://awapplerexample.cloudfront.net/800x600/an_image.png (THIS IS AN EXAMPLE NOT LIVE)

Then you can simply specify resolutions in the db side and call as required!

:smiley:

literally all you have to do is create the stack, point to your S3 bucket, include the resolution, job done! A few minutes set-up to save hours of pain…

Maybe a great addition to the Server Connect S3 options @patrick @George ?

3 Likes
#3

I noticed a couple of clicks on the example link… This is not a live link just an example of the link structure. Here is an example video linked to one of our live S3 buckets. Notice how simple it is to define the resolution in the video. Really is that easy!

#4

Thanks for that @Dave, please vote.

#5

Hello

Any orientation about how te setup the template??