Transforming Images Using AI Without Leaving Your React App

Alright, so my name is Luis Paul. I'm a senior software engineer with ImageX. Today we're going to be talking about transforming images with AI without leaving your React app. But I'm going to go fast because there's a lot of content so excuse me, I'll try to slow down.

So first off, a little story time. As developers, we love to ship product. We're laser focused on features, customer experience and satisfaction as we should be. That's our job. But that makes it easy to forget about the parts that we don't code, about things like images. So you might find yourself in this situation where you shipped a viral product, people love it, but they're also DMing you saying, hey, it's fantastic but you're shipping 100 megabytes of images. Let's not do that. And you got to run and fix it. So this is why it's important not to forget about images. They are the connective tissue to your sites. Images are the way the customers experience your product for the first time and they matter more than we tend to realize.

So what should we do about it? We should adopt image best practices. There's a bunch of them, right? You got source sizes, aspect ratio, layout shifts, lazyloading, etc. And ensuring you hit all of them takes time. So it requires you to do things like generate variants for all of your images. How do we make this easier? So we gravitated to doing things like image transformation as a build step. But it's not great. Transforming at build time can take forever. The feature set is more limited in terms of transformations you can achieve and you have to do some careful maintenance of your tooling to do it right long-term. The DX in short just isn't great.

So what else can we do? We can do things like image transformation on the edge. This is fast, easy to integrate into any application. It's always up-to-date. You can spin up a new replicate endpoint pretty easily and it stays up-to-date for you. But it comes with some overhead. You gotta spin up new functions and every time you need a new transformation, and you have to do things like maintaining and invalidating caches, syncing the generated asset back to your bucket where your assets live.

And so it can get a little complicated which is why people gravitate to image CDNs. With an image CDN, you can take care of all that heavy lifting. And then you can progressively adopt it using something like unpick image which will take care of hitting all these best practices for you. It's fantastic because it's zero config with most of the big CDNs out there. You just drop your image URL that lives in the CDN. It knows what to do. You just give it a width and a height if you need it. And that's pretty much it.

Long story short, you don't need to reinvent the wheel to achieve best practices. So let's take a look at how you could actually use this in your applications. We're gonna have a Contentful Next JS app, it's gonna use an image optimization library. It'll use an image CDN to remove all that overhead and will leverage the CDN's AI parameters to do some fun transformations.

So, first off, we're going to remove backgrounds using AI. We wanna do some consistency enforcement on our site, make sure that things match our designs. So here we have our Contentful Next JS application. It's got a hero image. We wanna remove the background. All we need to do, using in CDN, is use its background removal parameter, save, and by appending that to the URL, we'll have a removed background. That was quick, easy, painless, thanks to using Unpick Image in the CDN. Let's go ahead and keep going. We got some AI facial cropping we wanna do. We wanna make sure the images are always focused on what's actually highly relevant and centered. So let's take a look at how we can do that. We've got an image here, and we have somebody walking down the hallway, but we can't really see this person's face, and we'd like to, so, why don't we go ahead and crop it around this person's face? The way we do that is we add some parameters to the URL. We'll set Frick crop, we'll add some width and height dimensions. And once we've done that, now we also wanna make sure that we use some facial recognition to automatically center the subject's face in the image. Easy. And now, last thing we wanna do, do some upscaling. This is my personal favorite, it's like a magic trick. You can add some definition to the pixelated images, you're going to increase the pixel density, and you're gonna do some things like, you know, enhance lightning and contrast. So, if we're thinking about our Contentful NxJS application, we can have an image component, that all our images use, but maybe we have a lot of user-generated content, it gets a little hairy, right? Not everybody has the latest and greatest stuff, they have some old content, we wanna upscale it. What we have to do in this case is add the upscale parameter, save that, and so now, with the upscale equals true in our image URL, our image gets automatically upscaled and that carousel looks great. So just recapping, what did we do? We talked a lot about a lot of stuff. We did a Contentful NxJS application, we used an image optimization library called Unpick Image, and then we used an image CDN to remove all that nasty overhead of having to invalidate caches or store images in the cloud and finally, we leveraged that CDN to use some AI parameters like facial recognition cropping, like background removal, like upscaling and make sure our images always looked their best when they were being displayed. That's transforming images using AI without leaving your React app and I am sufficiently out of breath. Thank you all so much.