DEV Community

Cover image for A crash course on Serverless with AWS - Image resize on-the-fly with Lambda and S3

A crash course on Serverless with AWS - Image resize on-the-fly with Lambda and S3

Adnan Rahić on September 26, 2018

Handling large images has always been a pain in my side since I started writing code. Lately, it has started to have a huge impact on page speed an...
Collapse
 
realph profile image
Raphael Essoo-Snowdon • Edited

I'm having a problem triggering the resize function. The 400px x 400px version doesn't yet exist in S3, calling it for the first time should trigger the resize and put the resized image in S3, however the response fails in Chrome Dev Tools when I request it inside an image tag:

However, if I go to that URL (someUrl/400x400/default.jpg) directly in Chrome, the resize function is triggered and the image is added to S3.

Is there any reason why it's failing when used inside an img tag, and why it doesn't kick-off the resize function?

UPDATE: I'm getting an 'ERR_TOO_MANY_REDIRECTS' error. See the image below:

image

Collapse
 
mattpackwood profile image
Matthew Packwood

Hi,

I am getting an error: Initialization error: Node.js v8 is not supported by Serverless Framework v2. Please upgrade - Am I missing something, is this the version of Node.js in the docker container?

Matt

Collapse
 
ewoks profile image
Beeblebrox • Edited

One more great post!!! Thanks for it... Looking forward to next one ;)

Collapse
 
erebos-manannan profile image
Erebos Manannán

Personally I've found kraken.io/ to be a perfect service for this. Easily affordable, probably less work to set up than your own homebrew solution.

Collapse
 
adnanrahic profile image
Adnan Rahić

I quite literally built it to be deployed with one command. How's that less work than paying for a 3rd party service?

Collapse
 
erebos-manannan profile image
Erebos Manannán

Well, you built it, and you will have to maintain it.

Collapse
 
orliesaurus profile image
orliesaurus

Tell me about the cost of running this? Got any data?

Collapse
 
adnanrahic profile image
Adnan Rahić

I've been running it in production for almost a year. Have never paid a cent for it.

Why? Well, you only ever need a fixed set of dimension for your image. So it's a thumbnail, an HD, and a FullHD version. You'll rarely ever see some serious traffic even if you have a decent website.

Collapse
 
rnanwani profile image
Rahul Nanwani

As the website evolves, in terms of design and layout, improperly resized images are in fact one of the biggest factors contributing to page bloat. And at that time, one has to make do with the closest size available. So, you should account for requiring different sizes in the future to ensure that your resizing strategy is future-proof.

Collapse
 
jon_tarrant profile image
Jon Tarrant

Still works 05/19, thanks a lot really helped me quickly add a little extra layer of AWS awesomeness into a showcase i've been working on! :)

Collapse
 
adnanrahic profile image
Adnan Rahić

Glad to hear! This article is due for an update. It can be done with Layers now, or even with a nice Makefile setup. Hmmm, so many ideas. 😄
Anyhow, glad my article helped!

Collapse
 
robincingh profile image
Robin

Would be interesting to see the result between the above and set up something like Thumbor and compare the overall optimisation and Google Results for that as thumbor also serves webp file output.

Collapse
 
adnanrahic profile image
Adnan Rahić

That would be cool indeed. Does Thumbor work with serverless?

Collapse
 
robincingh profile image
Robin

I don't see it not working with serverless as it is similar to the approach you followed.