Using ImageEngine with Jamstack Vercel
By: Jon Arne S.
Tags: Image Processing, Cdn, Jamstack, Image Cdn, Vercel

Vercel is a deployment and hosting platform aimed at helping Jamstack developers get their web applications up and running in as little time and with as little effort as possible. Anyone familiar with Jamstack will know about the benefits of building websites this way, which includes better security, an improved workflow, easier scaling, and enhanced performance thanks to being able to deploy pre-rendered site files over a CDN.

As a platform, Vercel allows you to import your serverless Jamstack projects from a repository and deploy it live on their global edge network. From here on, they take care of everything, including asset compression and cache invalidation.

However, beyond delivering website content via a CDN, Vercel’s asset compression doesn’t include optimizing your image/visual content directly. This is where ImageEngine comes in — an intelligent image CDN that uses WURFL device detection to adapt image content optimally to pretty much any context.

Google themselves has identified optimizing image content as one of the areas with the highest potential for byte savings. Turns out, it’s also a pain to optimize image content manually and techniques like Responsive syntax are just not scalable enough today.

Using both services in tandem will ease pressure on you as a developer across the board. That’s why today we’ll go through how to set up and use Vercel and ImageEngine together.

Step #1: Sign up to ImageEngine and Link Your Image Assets

1.ImageEngine offers a 60-day free trial that you can sign up to by following this link here.

2. The first step is to provide the website on which you’d like to serve optimized images. Vercel assigns a default domain of https://{your-project-name}.vercel.app/ but you can change this to whatever domain you plan on using.

3. Next up, you’ll create an ImageEngine account with either your existing Google, GitHub, or ScientiaMobile account or by just providing an email and password.

4. Then, you’ll have to provide ImageEngine with the web location where your images are currently being stored. For this tutorial, I’ll use an AWS bucket, but you can use that, a web folder (such as where your website content is located/hosted), or a Google Storage bucket.

5. Once that’s done, ImageEngine will generate a default image serving domain, or “Engine”, for you. This will look something like {random string}.cdn.imgen.in. Don’t worry, you can change this from the dashboard as I’ll show you in a bit.

If you’ve come this far, you already have access to fully optimized images that will load faster on any device. ImageEngine’s completely hands-off approach means they will automatically generate optimal versions of all your images for different contexts and start caching it at their globally positioned PoPs.

If you want to give it a quick test before continuing, just find the URL for any of your image assets wherever it’s stored. Amazon AWS, calls it the Object URL and it looks like this:

https://mys3bucket.s3-us-west-1.amazonaws.com/path/myimage.jpg

By replacing the domain with your ImageEngine address, you can navigate to the optimized image in your browser. For example:

https://y6v1zkmr.cdn.imgeng.in/path/myimage.jpg

Optional: Customize your image serving domain

From your ImageEngine dashboard, click the “Add New Engine” button below your Engines.

Type in the domain of your choice, something like my.images.com in the “Delivery Address” box.

Under the “Origin Configuration” tab just select the image origin you added earlier from the drop down (or, add a new one).

Step #2: Update your Repository/Source Code

You will need to update all your image tags to reference their new location in your image serving Engine. There are a few different ways you could go about this, depending on how you manage your projects. This process should be the same regardless of what repository you use (e.g. GitHub, GitLab, BitBucket).

However, unless you want to specify directives for how particular images should be displayed, all you need to do is update the src attributes of all your <img> tags. There are two different ways to do this:

By prefixing the image URL with your ImageEngine domain:

`<img src=”http://y6v1zkmr.cdn.imgeng.in/http://myimages.com/image.jpeg">` Or, if you’ve mapped the origin to a domain name in the ImageEngine dashboard:

`<img src=”//y6v1zkmr.cdn.imgeng.in/image.jpg”>`

Step #3: Sign up to Vercel and Import your Repo

I won’t go into the entire process of signing up with Vercel and importing a GitHub project here. However, the most important thing to know is that you don’t have to do any special configuration (bar enabling client-hints) for ImageEngine to optimize your images on a Vercel deployed and hosted website. Instead, you can go through the Vercel documentation.

Basically, you just need to create a Vercel account, link it with GitHub, install the Vercel Integration, import your project, and then deploy your site.

One of Vercel’s handiest features is the ability to directly deploy Jamstack-friendly projects using frameworks like Next.js, Gatsby, Vue.js, Hugo, or more. If you go this route, you’ll just have to go back to your repository and update your image tags.

(Optional) Step #4: Set Up Client Hints with a Feature Policy

ImageEngine is one of the few image CDNs that supports client hints. However, security settings of certain browsers may prevent you from using client hints when serving images via external domains on Vercel-hosted sites.

To do this, just add a “vercel.json” file to your project and copy and paste in the following code. Just make sure to replace the image-serving domain with your own:

{

"routes": [

{

"src": "/*",

"headers": {

"Accept-CH": "DPR, Width, Viewport-Width",

"Feature-Policy": "ch-dpr https://my.images.com.imgeng.in 'self'; ch-width https://my.images.com.imgeng.in 'self'; ch-viewport-width https://my.images.com.imgeng.in 'self'"

}

}

]

}

Conclusion

So, there’s really nothing tricky about using ImageEngine to optimize image content on your serverless, Vercel-deployed project. And, you’ll have *client-hints* set up to boot. Thanks to Vercel, developing, previewing, and deploying your Jamstack site will be frictionless. And, thanks to ImageEngine, you’ll have a hands-off and future-proof image optimization solution.