Setting Up Your Own Image Transform Service
CreÂate optimized/​transformed images for penÂnies by leverÂagÂing the powÂer of AWS LambÂda to creÂate your own ServerÂless Image Handler
Andrew Welch / nystudio107
Image transÂforms are a necÂesÂsary part of modÂern web develÂopÂment, because we want to delivÂer optiÂmalÂly sized image srcsets to the client browser.
Whether you’re using a servÂer-renÂdered webÂsite or a JAMÂstack setÂup, image manipÂuÂlaÂtion is someÂthing that needs to be done as a part of the process.
Even if you’re using someÂthing like GatsÂby JS, the work of transÂformÂing images still needs to be done, it just moves to build time. We’re just changÂing where it gets done.
Many CMS’s and othÂer servÂer-side renÂdered techÂnoloÂgies have image transÂforms built into them. HowÂevÂer this essenÂtialÂly means that you’re self-hostÂing procesÂsor-intenÂsive image transÂforms on the same servÂer that you’re using to serve up your website.
If you haven’t run into issues self-hostÂing image transÂforms, rest assured that you evenÂtuÂalÂly will.
This is not a recipe for sucÂcess in terms of servÂing up your webÂsite in a perÂforÂmant manÂner. I’ve seen some webÂservers fall over if the image transÂform cache is ever broÂken, due to the CPU powÂer required to re-creÂate the transÂformed images.
AddiÂtionÂalÂly, most built-in image transÂform sysÂtems do not include an image optiÂmizaÂtion phase.
For more inforÂmaÂtion on the how’s and why’s of image optiÂmizaÂtion, check out my CreÂatÂing OptiÂmized Images in Craft CMS artiÂcle or the comÂpreÂhenÂsive EssenÂtial Image OptiÂmizaÂtion artiÂcle from Addy Osmani.
Because image transÂforms are so procesÂsor intenÂsive, serÂvices like Imgix and CloudÂiÂnary allow you to offload the work to their scalÂable servers. Both serÂvices are excelÂlent, but they also cost monÂey, and often do more than we actuÂalÂly need.
Enter AWS ServerÂless Image Handler
AmaÂzon AWS has offered a ServerÂless Image HanÂdler for a while that allows you to spin up an AWS LambÂda funcÂtion to creÂate your own priÂvate litÂtle image transÂform serÂvice that is inexÂpenÂsive, fast, and is frontÂed by the CloudÂFront conÂtent delivÂery netÂwork (CDN).
AWS LambÂda is part of the new wave of ​“serverÂless” funcÂtions that allow you to run code in the cloud withÂout proÂviÂsionÂing or mainÂtainÂing a servÂer. It’s inexÂpenÂsive, and hasÂsle-free, which is a fanÂtasÂtic comÂbo in my book.
Here’s what the AWS LambÂda pricÂing looks like:
For many smallÂer sites, you may nevÂer leave the free tier.
Under the hood, the AWS ServerÂless Image HanÂdler uses Sharp JS, which is a Node JS packÂage built on highÂly perÂforÂmant libÂvips image proÂcessÂing library. Here’s an overview what it looks like:
You can look at all of the code under the hood if you want, but the nice thing is that you don’t have to.
SetÂting up an AWS ServerÂless Image Handler
The wonÂderÂful part of all of this is that you can set up your own AWS LambÂda funcÂtion withÂout havÂing to do a deep dive in how it all works.
You’ll need some minor expeÂriÂence with AWS, and maybe some soothÂing music while you wade through the AWS UI/UX, but that’s it!
This works because you can spin up your serÂvice via AWS CloudÂForÂmaÂtion that uses preÂfab temÂplates for the creÂation of a stack that comÂprisÂes your setÂup. This means it’s essenÂtialÂly point and click to set everyÂthing up on the servÂer side:
- You need to have an AmaÂzon AWS account; if you don’t have one, get one
- Go to the ServerÂless Image HanÂdler page, and click on Launch SoluÂtion in AWS ConÂsole** , t**hen go through the temÂplate setup:
1. SPECÂIÂFY TEMPLATE
You won’t need to change anyÂthing here, unless you want to use your own cusÂtomized temÂplate. Click Next to proceed.
2. SPECÂIÂFY STACK DETAILS
Here there might be a few things you might choose to change (don’t worÂry, you can go back and change these latÂer, too):
- CORS Options  — If you want to enable CORS, you can conÂfigÂure it here
- Image Sources  — You need to list the AWS S3 BuckÂets that the ServerÂless Image HanÂdler can access
- Demo UI  — This will cause it to set up a demo UI you can play with to test your API. This is optionÂal, but I think useÂful when you’re getÂting startÂed. You can delete the Demo resources latÂer on
Click Next to proceed.
3. CONÂFIGÂURE STACK DETAILS
You won’t need to change anyÂthing here, unless you have a more involved AWS setÂup in terms of perÂmisÂsions & poliÂcies. Click Next to proceed.
4. REVIEW
There’s nothÂing to change here, you can just see an overview of what you’re going to creÂate. Click Next to proÂceed after checkÂing the I acknowlÂedge that AWS CloudÂForÂmaÂtion might creÂate IAM resources with cusÂtom names checkbox.
If you run into issues, use the ServerÂless Image HanÂdler DeployÂment Guide as the canonÂiÂcal source.
Using an AWS ServerÂless Image Handler
Now that you’ve spun up your serÂvice, assumÂing you set up the Demo UI as well, you’ll have the folÂlowÂing CloudÂFront disÂtriÂbÂuÂtions set up:
- Image hanÂdler disÂtriÂbÂuÂtion  — this is your ServerÂless Image HanÂdler disÂtriÂbÂuÂtion that you’ll access from your fronÂtend code to get your optiÂmized, transÂformed images
- WebÂsite disÂtriÂbÂuÂtion for soluÂtion  — this is a disÂtriÂbÂuÂtion creÂatÂed by the Demo UI so you can play with
While this will creÂate an S3 buckÂet for you if you creÂate the Demo UI, any S3 buckÂets that you need for your actuÂal website/​webapp are up to you to create.
Just make sure you then add them to your CloudÂForÂmaÂtion stack. TypÂiÂcalÂly your S3 buckÂets should be comÂpleteÂly priÂvate, and you set up CloudÂFront disÂtriÂbÂuÂtions as gateÂways to the S3 buckets.
Pro tip: You don’t realÂly want to serve staÂtÂic assets like images out of an S3 buckÂet, it’s intendÂed for storÂage, not disÂtriÂbÂuÂtion. Use a CDN disÂtriÂbÂuÂtion layÂer on top of S3, such as CloudFront.
Pro tip: if you don’t see a parÂticÂuÂlar serÂvice in AWS that you know you have creÂatÂed, make sure you’re in the corÂrect Region.
If you copy the URL to the Demo UI WebÂsite disÂtriÂbÂuÂtion for soluÂtion you’ll get a playÂground you can use to play around:
So the fun thing about the API is that all you need to do is creÂate a JSON blob of options:
{
"bucket": "images.nystudio107",
"key": "Octagon-Titlarks-House-02.jpg",
"edits": {
"resize": {
"width": 500,
"height": 300,
"fit": "cover"
},
"grayscale": true,
"flip": true
}
}
Here are the imporÂtant top-levÂel keys in the JSON:
- bucket — This is the id of the S3 buckÂet that the source image is in
- key — This is the path to the source image in the S3 bucket
- edits — A JSON-ified verÂsion of the Sharp JS API, conÂtainÂing the changes you want applied to the image
Then in whatÂevÂer proÂgramÂming lanÂguage you’re using, you just conÂvert the JSON to a string, and then base64 encode it into a URL:
https://d3dvp96ru4zk60.cloudfront.net/eyJidWNrZXQiOiJpbWFnZXMubnlzdHVkaW8xMDciLCJrZXkiOiJPY3RhZ29uLVRpdGxhcmtzLUhvdXNlLTAyLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjMwMCwiZml0IjoiY292ZXIifSwiZ3JheXNjYWxlIjp0cnVlLCJmbGlwIjp0cnVlfX0=
There’s an examÂple of how to do this via JavaScript in the scripts.js that is creÂatÂed in your Demo UI S3 buckÂet. OthÂer lanÂguages are simÂiÂlarÂly trivÂial to do it in.
All of the options that are impleÂmentÂed in the Sharp JSAPI are availÂable to you! All of your transÂform options that would norÂmalÂly be chained funcÂtions in Sharp JS just are in JSON forÂmat in the edits key.
You can resize, crop, rotate, tint, sharpÂen, and a whole bunch of othÂer image manipÂuÂlaÂtions, includÂing conÂvertÂing between forÂmats such as jpeg, webp, png, and tiff.
You have exquisÂite conÂtrol over the exact encodÂing methÂods should you want it, and by default, all images are optiÂmized for size.
Craft CMS ServerÂless Image Handler
The soluÂtion described here works with any frontend/​backend setÂup that you might be using.
HowÂevÂer, if you’re using Craft CMS, the ImaÂgeOpÂtiÂmize pluÂgÂin allows you to switch the TransÂform Method used site-wide to whatÂevÂer you want, from built-in Craft image transÂforms to Imgix image transforms.
VerÂsion 1.6.0 has added a Sharp transÂform method that works with the aforeÂmenÂtioned setup:
The nice thing about it is that you can change over to using difÂferÂent TransÂform MethÂods with zero temÂplate changes.
WrapÂping Up!
That’s all it takes to creÂate your own AWS ServerÂless Image HanÂdler! Try it for a personal/​demo site to gain conÂfiÂdence in how to set things up, and then away you go.
It realÂly is very inexÂpenÂsive comÂpared to services:
Yes, you’ll have to wade through a bit of AWS UX/UI that’s not fun, and learn a bit about AWS perÂmisÂsions… but I think it’s absoluteÂly worth the effort.
Whether you’re using a servÂer-renÂdered soluÂtion, a JAMÂstack soluÂtion, or someÂthing like GatsÂby, you’ll benÂeÂfit. No matÂter where the work of image transÂformÂing is done, a ServerÂless Image HanÂdler will speed up the process.
Not only will you be able to offload CPU intenÂsive image optimization/​transformation to your AWS LambÂda funcÂtion, but you probÂaÂbly can then downÂsize your servÂer (assumÂing you have one).
AddiÂtionÂalÂly, you’ll be learnÂing a bit of AWS in the process, which is a good thing to be familÂiar with in our business.
HapÂpy transforming!
Further Reading
If you want to be notified about new articles, follow nystudio107 on Twitter.
Copyright ©2020 nystudio107. Designed by nystudio107
Top comments (0)