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 ... [Read Full]
markdown guide
 

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:

<img src="http://someUrl/400x400/default.jpg">

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

 

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

 

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.

 

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.

 

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.

 

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

 
 

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! :)

 

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!

 

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

 

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.

 

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

 

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

code of conduct - report abuse