DEV Community

Cover image for An Open Source and Completely Serverless Image Resizing Service in AWS

An Open Source and Completely Serverless Image Resizing Service in AWS

Horace Nelson on May 20, 2021

Go straight to the Github Repo The need to properly size and optimize images within web and app content is such a common problem that th...
Collapse
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

Hey thank you so much the solution is flawless. one think i want to know is how does is serve the .webp, if i request my images like this my.service.url/myphoto.png?w=800, how does the .webp served.

Collapse
 
horaceshmorace profile image
Horace Nelson

Thanks for the praise, and you're welcome!

Two things work together to return WebP.

First, I check the "Accepts" header of the http request, which automatically gets sent by all browsers. If "webp" is in the value of that header, I know the client can accept webp format.

Second, I'm using the sharp npm package to manipulate the images. Sharp can create WebP images from source images.

And that's it. Glad you like the solution.

Collapse
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

Thanks for a quick reply.

I am facing the following an Error if the image is not in the bucket root,

Example: original URL: distribution/uploads/test.jpeg?w=200

Error message: "Error while getting source image object "/uploadstest.jpeg": NoSuchKey: The specified key does not exist"

If the image is in the subfolder I get the following error how can if ix it.

Thread Thread
 
horaceshmorace profile image
Horace Nelson

Ah, looks like a bug in appending the prefix ( a missing / character). I'll push a fix in about an hour.

Thread Thread
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

yah it took me long to realize that a / was missing please du push the fix.

Thread Thread
 
horaceshmorace profile image
Horace Nelson

I fixed the bug. You'll just need to git pull and npm run update [env].

Thread Thread
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

now its working like a charm. im just curious if its possible to control quality wen resizing. Im losing a great deal of quality for example if i resze an image from 800x800 to 200x200 the difference in quality is highly noticable.

Thread Thread
 
horaceshmorace profile image
Horace Nelson

There should be no loss of quality when sizing down. If anything, you'd gain quality. I'm curious... can you point me to an example?

Thread Thread
 
horaceshmorace profile image
Horace Nelson

Apparently, Sharp (the image processing library used) accepts some options for quality. I added the settings and pushed the changes. It looks like that solved the issue, so let me know if that helps.

Thread Thread
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

Simply did the trick thank you so much for your effort much appreciated.

Collapse
 
yomarkplacezim1 profile image
yomarkplacezimbabwe

Hie the solution is working great but rather i noted a huge grow on my page size after inspecting thoroughly i found out that if i upload a jpeg with 1200x800 size 88kb. If i then try to resize it to ?w=500 the size actually grows from 88kb to 265kb when it supposed to have gone down. i tried to change the sharp quality to as less a 50 but did not change a thing. thank you bro please look into it.

Collapse
 
yunus_etiner_8ba9ce35870 profile image
Yunus Çetiner

Hello there. I can't, I can't figure out how to install it. is there any video. Please