Generating Image Galleries, Open Graph Content with Vercel and Cloudinary

Sam Brace: [00:00:00] Hey there. My name is Sam Brace and I am the Senior Director of Customer Education and Community at Cloudinary. And you are watching and listening to DevJams. This is where we talk with developers who are doing amazing, interesting, innovative, inspiring projects, especially when it comes to working with images and videos on the web and software on mobile and many other amazing projects.

And because of course, I work at Cloudinary, this program is produced by those at Cloudinary. They probably are using Cloudinary for some of those image and video management and delivery aspects of their projects. In today’s livestream and episode, we are talking with a good friend of mine, Ben Seymour.

Ben, for full disclosure, actually did work for Cloudinary for a portion of time, but has been- for a while now- the [00:01:00] Director of Sales Engineering at Vercel and Vercel, if you haven’t encountered them, their amazing platform, especially for frontend developers, and we’ll walk through all the details about what Vercel does, especially in this program.

But he has an amazing set of projects that he’s gonna be able to show us today when it comes to being able to create image galleries very quickly on the fly with information coming from Cloudinary, particularly with the images that are coming from a Cloudinary account. And then we’re gonna dive deeply into a topic called Open Graph, which is of course, a type of metadata that is used by social networks like Facebook and Twitter and LinkedIn, as well as what we call micro browsers, such as services like Slack, to be able to display images that are associated with a certain URL.

We’re gonna dive into a lot of different ways that Vercel making that easy to work with, and of course, in conjunction with Cloudinary. Before we bring Ben onto the episode, I do wanna emphasize that if you, this is your first time ever being part [00:02:00] of a DevJams episode. Note that we have all of our previous episodes at cloudinary.com/podcasts.

That’s where you can go through the entire archive and find any episodes that tickle your fancy when it comes to details about JavaScript or Next js, or just working with images and videos and working with webhooks and metadata and all sorts of things are associated that there’s a lot of amazing content that’s inside of our overall podcast feed because we’ve been doing this for about two to three years now, so it’s a pretty impressive amount of content that we have in the library.

And we do also wanna emphasize that if you want to continue the conversations that Ben and I are gonna be having in this overall episode, many of the concepts are things that our users talk about daily inside of our Cloudinary community. You can find that at community.cloudinary.com. And as you’ll also see, we do have an associated Discord server for those that would prefer to talk in Discord versus our forums.

Or maybe both. [00:03:00] It gives you lots of different opportunities to be able to start conversations and meet users like you. As we said, Ben does work for Vercel, and I also emphasize front end development. It’s an amazing platform for all the things that you need to do when you’re working in this overall space.

But of course, we’re gonna dive into two specific types of projects, image galleries, and Open Graph. So with that said, I’m gonna bring my screen down and bring on Ben and welcome to the program Ben.

Ben Seymour: Amazing. Hey, Sam. Wonderful to be talking to you again. Just like good old times.

Sam Brace: It is.

Ben Seymour: Hey everybody. Ben Seymour, based in the UK, not far from Oxford, sleepy little town, very cute place. Founded in 1155. Great to live unless you like night life and food to be delivered to your house or the ability to catch a train all of which are impossible. There we go. I ultimately with live with my wife, our two kids who are 16 and 13, and our little dog.

And as you probably gather, I [00:04:00] like things through physics space and also fast moving things with two or four wheels. By day. I work for Vercel who also love speed in terms of web performance, but also developer iteration speed as well. So the sales mission I think is. There’s many missions in here, but one of them that I love is to enable developers to create at the moment of inspiration.

I think capturing that spirit, that flow state is something that I’ve always loved in terms of my work in this industry. And then one of our other mantras is the iteration velocity solves most problems which I think is one of these things where when you’re in the groove, almost anything is possible.

Outside of it. Added friction, added frustrations is deeply annoying. In terms of the rest of the team I’m very fortunate to work with some remarkable people. So we are massively open source. The people who work at Vercel are involved in all these projects, so Tobias created Webpack.

He’s currently working on the latest version called Turbopack with more of the team Rich who made Svelte is here, and Turborepo. Some amazing projects. [00:05:00] All massively open source, huge numbers of downloads and it’s something that we massively pride ourselves in contributing towards the overall community.

Lots more to say, but probably not today in terms of our story. What do you think, Sam? Should I move on to the conference? Should we get set?

Sam Brace: Yeah. Let’s talk about this conference that you guys did with an Next JS.

Ben Seymour: Perfect. So this was October of last year. And effectively it is by Vercel, all about Next JS in this case. So really it is run on the platform. We build the everything conferencing facilities. We look after everything, but it’s fundamentally not about Vercel per se, but about Next JS specifically one, one of our open source projects. In this particular instance, we had 110,000 people sign up to watch it.

55,000 people watched it online. And if you look at the kind of follow on views that they’re pretty impressive. In this one we talked about a variety of things being released. One of them was this thing called edge functions, which at that time was in beta. This is actually quite important to what we’re gonna talk about in terms of Open Graph because we leverage this under the covers to allow certain things to be very [00:06:00] capable.

It was a hybrid event. It was actually the first time we’ve done a hybrid event. It was fairly small. We had a few hundred people in San Francisco, also in New York. We also had one in London and also Sydney. But one of the joys we did is that we took lots of photographs of the day to capture the fact that lots of people look to meet each other for the first time.

So we are a remote first company, but also we are a member of a very large community of people, many of whom would also not seen each other for a long time. So lots of friends came, lots of people from across the industry came, and we made this rather splendid and glorious image gallery that came out of it.

It’s very hard to run a performance test while we’re live on air, but effectively this is an incognito tab and if all goes well you’ll notice that was staggeringly fast. We’ll share the link at another time, but ultimately it is one of the fastest, frankly, media rich. One of the fastest loading sites I’ve ever seen.

The general interaction, oops, I clicked my mistake. The general interaction with everything that you do is incredibly fast. Now, behind the scenes of all [00:07:00] this, just like Sam said earlier there’s fundamentally a lot of Cloudinary going on and a lot of Next JS with Vercel going on. One thing that we’re massively fond of doing is also is sharing what we’ve learned.

So Hassan, who works on that main project for the gallery also wrote an extensive blog going into all the little details that he did, some fascinating stuff that he did along with some of the engineering teams in the ways that we were using effectively the Cloudinary’s APIs alongside some of our data loading properties to allow us to leverage, the best power of all worlds.

There’s some tips and tricks he gave down that I’d never seen done before that were quite amazing that some of his suggestions are to do with things like having a. Having a zero transform 3D which ultimately forces hard work acceleration where it’s available to you. So little tricks like that in effect it looks like it shouldn’t do anything, but behind the scenes it does some fairly subtle things. Also amazing things about this is if you notice there is a clone and deploy button. So another thing that we love to do is somebody wants [00:08:00] to again, learn at the point of inspiration, is that if this looks cool, you can read the blog and you can literally hit clone.

And effectively you can in about three clicks have a version of this fully running on your own local host or also on your own Vercel account. If you take one of our other templates. So if you go to vercel.com/templates, this is where effectively, you have a huge list of starter kits and by no means is it only Next JS you will find most frameworks cause we are also framework agnostic.

You’ll find lots of partnerships and effectively if you search in here a Cloudinary. Then you’ll find there you go, that one there, which is one we’re also talking about. So again, getting going super quick, this is one that I was considering doing live on air, but frankly, take my word for it. The whole thing was deployed in 46 seconds.

So I think one of the things that often I am looking for my many developers is if I want to go and learn something, how much time do I need to invest in this? Can I make progress in. An hour, a day, a week, how long do I need to go and do this before I can actually show that there is [00:09:00] some value coming out of it? Our goal is to make that, frankly, seconds and minutes more than anything else. So…

Sam Brace: Really incredible. And what I love about what we’ve done here is that we’ve combined, as you said, best of breed where we have all of this amazing technology that Vercel went and did, but it’s not where you went and tried to reinvent the wheel with image delivery, image management, you’re able to combine two distinctly different technologies and bring them together for this one project and. It’s something where I was interestingly showing this to our events team that ran our user summit back in London a few weeks ago now, and they were saying, “oh, we need to do this for all of our events”. So it’s to say this is a easy to use tool that any team can absolutely adopt. So great work by the Vercel team to be able to make this possible.

Ben Seymour: Perfect. Perfect. I think that bit where the two worlds meet is probably most if I come down to here. So effectively within Next JS and ultimately this is using there’s a new version of Next JS that went into [00:10:00] stable release last week using a thing called App Router.

This one is actually based on pages. So in this instance, we’re gonna do a single set of data fetching within Next JS. Get static props is effectively a way of saying we would like to pre-build this page or build the page at a certain moment in time. So you can have versions where you do effectively what is server side loading.

Every request goes and make something happen on a server that typically has some kind of performance impact that is rarely good for user experience, but it can help greatly with things like personalization and a few other things. In this instance, we’ve got an option with a Next JS GET static prop says, I’m gonna go and effectively pre-build all of the pages a bit like static site generation that I’ll need in order to then serve what is effectively static pages out onto the web.

But there’s a couple of small twists into that. One of them is that you can choose to do only a small subsection. So imagine if I’m a massive news and media company and I have got a million assets in Cloudinary, maybe I’ve got, 10,000 collections- building all of those is gonna take a long amount of time.

So what you can do within here is you can actually say, [00:11:00] build certain of the collections but not the others. The rest can be generated at request time and after that point will be then served as though that they were fully static objects. In this particular instance, you can see that ultimately I’m using the there you go.

There’s the Cloudinary search. I’m using a variety of things and I’m passing in through environment variables just like you would do. So mostly my credentials, my authentication is done behind there, but I also do certain types of kind of configuration against the actual media that we’re gonna serve in here.

So in this instance, we’re going against a given specific folder. We could have done tags, we could have done any other piece of metadata. And then effectively we’re gonna say to Cloudinary via the APIs, please give us all the information that is relevant to this particular query. If you can just see in the terminal at the bottom, I hope that’s big enough.

This is only the response that comes back, so the JSON response comes back. And ultimately this one brings back what is it, about 111 items. I think it was just in there. So again, I’m making the API request. This could be done at build time or also in [00:12:00] this instance, another interesting thing happens, which is I’ve added a single line which completely changes certain elements of the information architecture.

So this single line revalidate effectively 3,600, which is one hour in seconds. What this says is this page is gonna be classed as static. So from performance perspective, this is a really static file served by globally deployed CDNs. But the revalidate effectively says that every hour we’re gonna check to see if there’s updates.

This is highly configurable. What it means is you do your event and on day two, you wanna do the next one effectively you’re not gonna have to rebuild everything from scratch, but you will find, pick up those kind of, those changeable aspects, if that makes sense. Sorry, Sam, I think you were gonna ask me something.

Sam Brace: No, I wasn’t gonna say, I was just saying that’s a very, very smart one line of code because as you said, one thing that we push a lot in training is being able to set it and forget it to say get your system to be able to work for you. Set up automations, let Cloudinary do its work with automatic transformations.

And this is an example of that where you [00:13:00] can easily say, just revalidate and it’s gonna continue to make sure that whatever you’re adding to this folder is gonna make sure it’s updated to what’s showing in this overall app. So this is fantastic.

Ben Seymour: You mentioned web hooks earlier, it’s one of the other things that you talk about.

So we can also do a think on demand for revalidation, which effectively is, as long as you’ve got a slightly more complex system, which is gonna trigger an event, we can then catch that and do the invalidation on request as well, if you like. So lots of options. Next what I was gonna do is, so this thing here is using an environment variable.

I’m just gonna manually override it. And if you look on the left, so effectively, there you go. So what just happened is in my local environment, I have literally made one change. This has then regenerated this particular page. It’s changed the request in the way it’s gone out to Cloudinary. Cloudinary has come back with an entirely different set of media and everything else is then built on demand.

I think it’s remarkable how quickly you can affect change. If I roll this one back to just as it was, and again, hit save there are certain things within, the Next [00:14:00] JS development environments that are pretty much instantaneous. We have a hot module reloading, so if I change that title at the top there and then hit save, you’ll instantly see it.

In this instance, we’re of course making a change that triggers an API request. Which then comes back, hence even what you’re seeing there is the full round trip. And then all the media also being loaded. Another cool thing, this is something that I for create, create, there we go. In this version, effectively what I’ve just done, as I’ve said this time, please can Cloudinary give me the JSON response back for all the media that matches my query.

But please can you do it in descending order effectively reverse order by the created app. So this is literally the reverse order timeline. So this is the most recent photograph most recently. This project actually is slightly more complicated, which is it’s actually my Instagram feed. And as you probably gathered I’m very fortunate I gotta go and spend a couple of weeks in Iceland very recently.

Yeah, this is actually me setting up a slightly more complex workflow, which was, there is [00:15:00] a Zapier integration running with my Cloudinary account, which effectively is looking for changes in there. It’s then doing an automatic import into my Cloudinary account, doing a bit of tagging, doing some object aware kind of AI analysis as well.

And then this allows me to effectively keep almost like an owned media version of my social media as well, just to gimme lots more choices and things like that.

Sam Brace: Which is incredible. And we’re seeing even more people doing this. Like we had previous episodes where people did something very similar where we’re trying to get everything to come from our Instagram account because of un unreliability they found sometimes with their APIs.

So it’s what you’re demonstrating is not like edge case by any means. We’re seeing more and more developers trying to own their Instagram content and put it into somewhere a little bit more safe or just at least more reliable. So this is cool.

Ben Seymour: The other wonderful thing is set it and forget it is, I’d actually forgotten I set this up until I came to do this project.

I went to go and set it up and found that effectively my Cloudinary account was already [00:16:00] still running on the old API that I’d set up quite some time ago.

Sam Brace: Very nice.

Ben Seymour: So, the next thing I was gonna look, talk about, so this is all fairly local. This is me working at my machine rapid iterations, trying lots of stuff, seeing what the outcomes are like, making sure that each, I suppose each use case fits.

There’s gonna be certain things in here that, if we look at, again, you might look at how we handle different aspect ratio ratios of images does a pretty good job. But having done my local work, I suppose the next thing that typically wanna do is we wanna open up to more people. So this is me going into my Cloudinary dashboard and my, sorry, my Vercel dashboard and my account.

And ultimately, this is me finding what’s called my deployment pipelines. So these are all of the bills that I’ve been doing, and as you can see in the run up to this webinar, I did a few double checks of a few things over here. I did a few redeployments, a few status changes, a few changes.

This is every deployment that I’ve done against my account, but not just the live production work, but also the preview, what’s called a preview deployment. So if you see here [00:17:00] preview- what this actually means is that I did a branch on the code. So locally I branched. In this case it was called Iceland.

It was for that trip that I just mentioned about and effectively having done a branch and then worked off that on that branch. As soon as I start to do commits against it, my Vercel account picks this up, realizes it’s not a production deployment, it then spills up an entire preview deployment, which allows me to do things like share this with somebody like Sam, who can then come in and inspect it without making any changes to production.

It gives me a couple of other really nice, handy things as well, which is I can have environment specific environment variables. So if you saw earlier, sorry, let me just mute when I cough.

If you saw earlier I made that change locally. In this instance, this is me doing it via environment variables on the platform. So I can take a fork of my code, I can come up with another edge case, I can have a preview deployment, and then effectively I can say, Hey, but let’s try it in a different configuration.

And what [00:18:00] you get out the other end is effectively a live running version of that same thing we saw earlier. But it’s not gonna affect the production. So it’s a live preview deployment that frankly, to all intents purposes could be used live if we so wished. The other thing that is pretty cool is if you see here, effectively, we’ve also got DNS settings.

So within my account, what I’ve said is look for the branch called Iceland and set a subdomain against only that branch. Obviously, it can be called whatever you like. So in this instance, if I’m working in a bigger team, We can already know in advance what the end state URL is going to be. That everybody can then run tests against, if that makes sense.

You can either have these against against things like the the Git project name, so that’s also predictable further in time. Or you can have it against manually curated one. So if you wanna share it with your QA team, they will know in advance where it’s gonna be. And it’s just a question of orchestrating.

I don’t think we have. Time today. But there’s some other cool stuff that we can also do, which allows actually other elements of feedback, which is this preview deployment also [00:19:00] includes the ability to annotate. So effectively anybody coming in here could start to add in things to passing comments back to the team.

So phase one is rapid iteration locally. Phase two is sharing with the bigger team. Phase three is getting feedback from the rest of the team. And it does things like it goes into your linear boards as well, if that makes sense. So this one I think is all about the iteration speed of the team.

And that’s pretty important.

Sam Brace: Truly incredible. And the thing that I love that we’ve done here, to take a little bit of a Cloudinary angle on it as well, is that many times when people see that search API that you’re using, they think of it strictly as a way to go and pull a list, but they don’t necessarily always think about it as a way to pull a list that’s gonna be driving delivery.

And the fact that you’re able to do it this way to say that we’re calling this, we’re getting the list of 150 results from that folder, and then deploying that into this gallery. That’s a really cool use case for the search API. So I think that there’s a lot of amazing things here, but I’m blown away.

Ben Seymour: Wonderful. In [00:20:00] a way this kind of brings us to the start actually.

Sam Brace: Yeah.

Ben Seymour: So the reason that you and I got in touch again was that I shared that project that we just looked at. I shared that into LinkedIn. This is the actual post, and ultimately, I think you spotted this and saw that I was doing some stuff with Open Graph, and that was how the rest of this all started.

This is the Open Graph image, which I set up on that project. The next thing we’re gonna talk about is what Open Graph is, have to use it, and also some of the ways in which effectively Vercel, Next JS, and Cloudinary can combine to give some incredible capabilities. If you share that same post, or if you were to drop dynamic.photos into Slack, you get something like this.

Obviously this one is me dropping that link into into LinkedIn. Interestingly, when I did a re-share of the post that Sam did for this webinar it actually accidentally, inadvertently gave us an example of what does what something that isn’t good, looks like. I’m trying to avoid saying bad, but fairly what bad looks like.

So within [00:21:00] post re-sharing, within LinkedIn, it doesn’t allow you to have control over your own Open Graph. Now, I would argue that frankly, a big blue box doesn’t really do a great deal to entice you in compared to what you can do from an Open Graph perspective. This is a protocol. It is available effectively.

It’s just typically attributes that go into the head of your html by and large. There are some fundamentals that you should always try and have things like title and types. The type could be videos or images. If it is an image, then you want to share a URL to the image. So in the case of the one that we saw a moment ago, the image that was shared effectively here is a completely different image.

It’s one that you would never see on the webpage itself. So if you scroll up and down in here, at no point will you see that image. It is within, inside the head. So it’s within, inside the metadata of the page. It’s only used by other systems or other services or other processes. We worked with Colin for a while.

And ultimately Colin is amazing posts on this as well. So it’s also called [00:22:00] micro browsers, or it can also be called link confirming sometimes as well, but the protocol behind all of it is ultimately Open Graph. My intention is I think Sam and I are gonna find a way to share some links with everybody afterwards, but some great resources.

In this case by Colin, there is also one by one of your colleagues Colby.

Sam Brace: Yep.

Ben Seymour: Tons here to be researched into. Frankly, it isn’t just what we’re talking about today. Today, it’s just the tip of the iceberg. There’s a lot in there that you want to consider from customer acquisition, from social engagement from SEO.

There’s a lot of business benefits to be explored. The final thing in this sequence is I actually was using Cloudinary in one of my other projects. So I have a storytelling platform that I’ve been building for a while and ultimately behind the scenes I was using before you and I met each other, the first time I was actually using Cloudinary to do some very complex image manipulation.

So ultimately within inside the page itself, there’s nine different images. They’re all completely independent, and as you can see, they are varying aspect ratios. Some of them are quite [00:23:00] wide, some of them actually both of those happen to be quite wide, but there we go. Some of them are more square behind the scenes what I did with Cloudinary was, and you can see it just here, it’s actually, it’s a fairly complex command. It’s a multi-layered command, is ultimately I’m taking a variety of different aspect ratio source assets, and I’m doing intelligent cropping on each one, and I’m doing a complex layering sequence to make this single.

So this is a single composite image, which is effectively built from nine other images. I think the most important thing to mention about the Open Graph thing a moment ago is effectively, you get one image. What you do with it is very much based on the tooling that you have. So in this instance, you can obviously argue that Cloudinary allows me to do remarkable levels of image manipulation. But the end result, this is just a single image request and that’s the power where Open Graph gives you one reference, but what you can do with it is quite remarkable.

Sam Brace: It’s interesting because like Open Graph is something that I’ve been talking about, I feel like I’ve talked about for 10 years now, like I might be a little bit off maybe it’s more like nine or but it’s something where this isn’t necessarily new [00:24:00] technology that we’re talking about here. This is something that. I remember when we were teaching people about just running their websites back in like 2014, 2013, and we’re teaching them about this new thing that is coming from Facebook now meta and talking about Open Graph protocols and this is a way to make sure that you can start affecting the way that your metadata looks on social websites like Twitter and LinkedIn and so it’s something where it’s interesting that it’s still so powerful, but in my opinion, it’s still something that people are trying to wrap their heads around.

Because as you pointed out, many times when we are writing this new blog post or showing a new project, we don’t always think about the ways that people discover it on social media or discover it, as you mentioned, for search and optimization purposes. So there’s a lot of deep power with being able to just start thinking about Open Graph and what it means for your project that you’re trying to share with somebody, because pictures get people excited and they get people to click [00:25:00] through, and that should ultimately help in open rates and time on site and all the things that people care about when it comes to analytics. So I think what we’re gonna be covering here about how this is all done is vitally important for anybody that’s just trying to be able to get people to know about the work that they’re doing because Open Graph is a great tool for that.

Ben Seymour: I think the other thing that’s changed over those 10 years, while the protocol has pretty much stayed the same, is that social media has clearly dramatically changed in the last decade. So I think the way that we use our phones and the way that we use various platforms, I think this is the fundamentally different thing where, you know, this is a massive change if you look at the viewing stats between devices 10 years ago, 2014 to 2024 yeah, it is gonna be quite another a big change when you look at it.

Sam Brace: Absolutely. Absolutely.

Ben Seymour: Okay. This was last year where effectively we announced a new iteration of a project that we already had.

And by we I mean Vercel and by we I mean people who are far smarter than me and a variety of other people in [00:26:00] the engineering team. So we originally had, and this is what this blog post talks about, we originally had effectively a different architecture was using a totally different build system.

It was ultimately running on something that’s a bit more like a lambda, like a serverless function. It had various consequences, like maybe slow cold boot times. A variety of weight in the complexity of the library and the environment was being run and led to an amazingly powerful solution.

But which compared to what we released at the very end of last year, actually was quite slow in comparison. I suppose a nice way is to say that the new version is significantly faster, significantly more performant to the point where it’s, I thought what you can say there it’s effectively, I think it was like, 50% faster, even from a warm start.

And if it was versus a cold start, then it was a greater magnitude. So you can see that. Sorry, there it is. Just there. So it was taking maybe four seconds to generate one of these. The modern version is taking like hundreds of milliseconds. No more than that. There’s also a variety [00:27:00] of other things that’s also happened in the way that we’ve replatformed is we’re now using a effectively far less expensive compute, which means that you can start to consider doing something like a hundred thousand of these.

And not be that concerned about the cost that you’d have. If you scroll down to the bottom of this one again, we’ll share the links later, is that actually, for that conference you mentioned earlier, we actually did custom OG images for every single person who signed up for a ticket. So we made over a hundred thousand of these using the same technology, every single one, personalized.

Obviously, from our perspective, we wanted this to be something that was then shared socially on Twitter, everything else to also gain traction and also to gain everything else. So this was the digital equivalent of this thing here that I’m holding up to the camera. We also had for people at the in-person event, this is the digital version of that, and it went down very well.

This also massively helped with certain levels of engagement. People wanted to share it. People then were curious. Some people wanted to know how on earth we’ve done it. Other people and talk more about the conference. So there’s a lot going on behind the scenes. Part of the thing that [00:28:00] greatly helped this become feasible is I mentioned that in that October event we talked about going into a beta release.

We also are now at the point where this thing called edge function is effectively is now a ga. And this was just at the tail end of last year, which opens up a lot of different possibilities. So this gives us effectively a lightweight edge run time. No cold starts, but the bit that also I think gives it really interesting dimension is that it supports web assembly.

So you can take things written and C or rust and you can effectively start to combine all of those and then run them in this same environment, which is why yeah, again we’ve been able to get some pretty phenomenal outputs from it. So our general approach is tons of documentation. Obviously we try and give as many examples as possible.

Our goal is obviously to help everybody get hands on as quickly as possible, to learn as quickly as possible. There’s always a playground because not everybody likes read documentation, but I think the other bit I also love is that we’re massively open sourced. So effectively this is open source and public, so you can see plenty of forks, plenty of stars. And then the other bit is if you want to go and get [00:29:00] hands on, you can just come here and you can grab off one of our repos, a ton of existing examples that you can copy and paste as the start, as to what you do next.

Sam Brace: One thing that’s really cool about this, and I wanted to see what you thought about it. So we’ve, when we’ve talked about Open Graph with other projects in the past that developers have done, a lot of times they’re using systems like puppeteer, serverless functions that are associated. Maybe playwright is another one that I’ve seen come up that’s the same idea as puppeteer, but what, talking about advantages and disadvantages, to me this seems like a much more scalable option.

Like the example you showed of an Next JS Open Graph that you had for the conference is that if you have to create a ton of OG content quickly, this seems to be able to generate that much faster than constantly having to spin everything up from a cold boot, everything that you have from just like basically spinning of a whole browser to be able to just handle this thing. But talk to me about that, cause I, I feel like I don’t [00:30:00] fully understand like the competitive aspect of that.

Ben Seymour: I think you’ve nailed the core points though, so effectively this is a review of the old system that had been built by the team three or four years ago compared to the new version.

So, the old version was using chromium in a serverless function, the new version effectively doesn’t require even a headless browser. So we’re doing it a lot closer to native, which obviously gives you It’s far faster and far cheaper and far quicker. So, normally what is it… Fast, good or quicker? Whatever it is. Pick two. Effectively, we just went for all of them from outside.

Sam Brace: Yeah, you kinda did. I agree.

Ben Seymour: So, we kinda just went for everything. What, why choose two? Two, which you can have the entire lot. So this is ultimately again, Sartori itself is open source. You can grab it and if you really want to, you can go and try and implement it yourself.

We have then ultimately implemented this as a core primitive within, inside of the kind of the cell ecosystem of cell platform, and Next JS is a framework as well. So you can by all means, go and, [00:31:00] follow your own path. Obviously, we think we’ve done a pretty good job and you can probably save an awful lot of time by using ours.

But we also know that people like to go and noodle around for themselves as well. Yeah you nailed it earlier, massively fast, much much cheaper, and much more performant to get those first responses back as well. What I did then was I actually grabbed some of those examples just to show a few running ones.

Shall I have a quick wander through these?

Sam Brace: Yeah, absolutely. I would love to see some of this.

Ben Seymour: Smashing. So, this is yeah, as you can see, this is a fairly simple little bit of code. Ultimately, I literally just grabbed one of them interesting actually, I should have updated these. I mentioned earlier that this this edge is now it’s now in stable release.

Some of these code examples when I first made them, which is was the tail end of last year, actually was still using that version one so I could come back and make this stable these days without using experimental version. One of the glorious things is, from a frontend perspective, if you [00:32:00] imagine we built a website.

It’s mostly frontend skills that have gone into that. Obviously, people who know, html, css, probably tailwind these days. A variety of things in JavaScript may be using Next JS or anything that you like, and yet when it comes to the OG image, The kind of tooling in many cases for a lot of people might well be doing something like Cloudinary manipulation, but a lot of people that I met with were generally building something in Photoshop.

Sam Brace: Yeah.

Ben Seymour: And then doing an export as a static object and then trying to put that somewhere it could be pointed at. I think that step between modern frontend and Photoshop, and I used to work at Adobe and I love Photoshop, but it’s not by any means the same skillset or the same workflow or the same process.

In this sense, the joyful thing is that we’re using html and css tailwind to effectively determine what the layout looks like. So the exact same people who are building frontend experience are gonna be really familiar with how all this works. So hopefully html, css image references can come in.

What [00:33:00] comes out the other end is, this is what’s produced. This is effectively just an image. So you get an image response back. This is me using this one up here – the Vercel OG library and that’s pretty much it actually. Obviously there’s a little bit of a try catches for errors, but this is all you need to do to start your image generation process.

Now what I do as I wander through this next thing is this one here was hard coded, which obviously doesn’t certainly scale. So in the second one, I just chuck a bit of stuff in that says, maybe don’t have a look at this query strings. If there’s a career string parameter in the right name, then let’s start using that to dynamically change things.

This is where it’s slightly tricky with the smaller screen, but in here, this is literally me saying, breakthrough from your constraints. Whatever we put into here, will then be dynamically generated at request time. So this is how you can imagine, you can start to do very dynamic generation of everything.

So you could have one of these automatically generated for every single blog post that you ever do and it supports multilingual. So you could have one of these for every [00:34:00] blog post that you ever do. In the right language for the region where you’re gonna serve it into. So this becomes immensely powerful.

You can start to you can hear, start to couple up your content management system. Your send headless CMSs into your production systems as well. So I think this is tremendously powerful. Next step in here was, let’s bring that one back over to here. Thank you. Next step is let’s use some custom typefaces.

So between these two here, you’ll notice it’s starting to look a lot better. Bit of typography goes a long way. So at this point I’m making a reference to some true type and also to woff. We’ve also got some other very interesting font optimizations for your live website. But that’s, For another time.

So, in here I’m pulling in font file references. So if you happen to be the kind of business that has your own custom font recommended you end, you can then start to make references here. Other than this, check the licensing on your typefaces. I’m also doing a little bit where I’m starting to do some tweaks to things like the background color.

So if you have a look at my blog, there’s a certain color palette that I use in [00:35:00] my blog. So this is where I’m starting to make this a little bit more customized. I’m using better typography. In the next instance, I just wanted to show, again, it might only be a, oops, come on. There we go.

Might only be a single media reference, but this is actually a. The media reference I showed you earlier. So the fact that Cloudinary is taking all of this and is doing the nine image optimization, cropping, manipulation, compositing, and serving means that single image reference is remarkably powerful.

So this is where I think you really start to combine both worlds. If I’d have needed to build effectively a different setup within inside of this this html to handle all of that would’ve been a lot more complex. So I think this is a great place where the two worlds really work very nicely together with each other.

And the next example is really this one that is one of the ones that started it. So this is where I grabbed an asset. I was experimenting with different color palettes and I just wanted to very quickly effectively reverse this. So what looks like if you invert all of the [00:36:00] colors effectively, And this is where I hit a snag, which thankfully again with Cloudinary in my back pocket allowed me to fix it.

So ultimately this is the before and after. So if I do nothing to that image, which effectively was a black liner that was on a transparent background, it’s actually an svg as it turns out. And if things like sanitize so one of the great things about svg is it’s immensely powerful.

One of the bad things about svg is it’s immensely powerful. You can hide just about anything in it. One of my favorite simple commands within Cloudinary, you can sanitize the svg, is to make them a fairly safe to reuse elsewhere. I actually was converting it, background, removing it, and also allowing myself to do things like color change.

So if I come over to here and then there we go. So this is, I think, a pretty beautiful outcome that would’ve been really hard to do without the combination of both those technologies.

Sam Brace: There’s so many good things that are, I’m you’re showing here because one, one showing the overlay situation that you’re able to create with the nine picture grid that you had there.

It does [00:37:00] show really great use cases. To be able to say, if I wanna take this image and that image and the other one, and combine them to create this Open Graph image, or just anything with being able to combine this into one piece of content. Cloudinary can do that with overlays, so I love that L underscore usage and being able to manipulate where the X and Y coordinates are and create that beautiful grid.

But this is also very impressive, what you’ve gone shown here with the overall picture that we was basically black against a black background because again, this is showing the ability to colorize being able to do all of this on the fly, but also programmatically because let’s say that you have this happening across 50 Open Graph images.

This is where, thanks to what Vercels doing, you can scale that, but also you can simply apply some of these parameters into the overall images and you can have them now immediately all affected where back to previous software that we mentioned, it was where that’s not as easy to automate. You would have to go in and [00:38:00] manipulate each single image, do an upload, be able to then pass this into a place where it, so it’s just, this is a very simple approach to being able to handle something that’s very complex and I really love these overall demonstrations you’ve created here.

Ben Seymour: No worries. I do have a few more. If you’ve got a bit more time.

Sam Brace: I would love, I love demonstrations. Keep it going. Keep it going.

Ben Seymour: So, this one is again, ripping on the theme you saw earlier. I’m not gonna show the code. I think you can. I think most people figure out what’s going on behind the scenes.

I’m gonna show the Cloudinary commands that I use behind them. So this is where we started. The idea is we start with a single image. It’s a glorious image that I I found somewhere. The limit with this is effectively, it’s a big rectangle. It’s a big rectangle with a certain shade of blue.

And, the subject in question is the turtle, obviously. But one of the things I really love is this command here. So I use Cloudinary’s background removal in this instance. So this [00:39:00] is me taking that same image. I’m not doing anything to it, frankly. All I did was add another command and then Cloudinary does it for me.

And then I can start to do little bits of tweaks. So this is where I can start to take that existing initial media and I can start to experiment with it. I can start to break it free from those foundations of being in that fully in a big rectangle. I can now make it feel like it’s a part of the rest of everything else.

It doesn’t be like text next to image anymore. It feels like one item being drawn next to each other. And then can do other treatments. Everyone experiment with color palettes. This is gray scaling. Final one for this sequence is one that is frankly, one, again, one of my hugely favorite things, which is Cloudinary has colorblind assist effectively. So it’s this command up here. So if you imagine the kind of work that you end up doing as a frontend web designer in terms of color contrast, when you’re thinking of accessibility from a visual standpoint, this is the treatment that allows you to do something very similar to your images.

As well. And very few people I think, actually remember to do about this. So if you look very closely, what you can see, and I’ve done it in the black and white one, to make it slide more obvious [00:40:00] effectively, it’s overlying overlaying lattices, where the color contrast is different in the image. So if you were somebody who had a colorblind weakness, you may not see those boundaries, and this lattice just means you can more easily start to see the definition of it.

This is one of those things where I wish more people would consider doing this. I have four brothers and two of them are colorblind and they really struggle. It means I get to win at Snooker slightly more easily. But other than that it’s hazardous.

Sam Brace: Oh, I love it. But no, but you’re absolutely right, and that’s the wonderful thing about being able to have all of these thousands of transformation opportunities is that if you want to be able to say, I need this to be gray scale, or if I need to flip the image once again, you don’t have to be going into separate software to do it, it’s just changing the URL or changing the overall parameters you’re calling for that image. So, it’s simple and it shows a lot of the power that Cloudinary is providing to be able to create these Open Graph images. So, I think these are excellent examples.

Ben Seymour: Okay. I already think I [00:41:00] know you well enough to know that you’re gonna quite like this one as well.

So this one is if you ignore the crudity of the mockup, this is a Photoshop file. So we said earlier, this is where a lot of people start their work, especially on the creative side of things. Behind the scenes is a Photoshop file. If I was to change this to be psd ultimately it’s not gonna load because browsers don’t support them.

It’s gonna offer to me to try and download it. At the end of the day, it probably is gonna be 10 meg 20 meg. I’ve seen Photoshop files that were 50 plus meg. So the original asset in here is a very common protocol. Photoshop files. PSD files. Ignore the design. That’s just me. I’m not a designer, unsurprisingly.

So the original file is how many creative teams work, but it’s in a format that really isn’t, particularly helpful for the web industry at large. The joyful thing here is eventually I can just drop a different file extension, Cloudinary does that change for me. Another thing that I really love is this is where I can reference different layers.

So I can actually say which [00:42:00] layers within the Photoshop file to turn on and off. And then I can start to do extraction. So it’s a bit like that background remove from earlier, but it’s also a completely different workflow because this starts with a multi-layered composite that’s probably had a lot of care and attention paid to it, and in the end it allows me to take this same asset and to reuse it.

The investment typically from creative teams in making these assets in the first place, the photography, the photo shoot, the touching up later on to be able to repurpose subsections of that in every other format. I think this is rather wonderful.

Sam Brace: It is.

Ben Seymour: Also, again it’s a different use case, but it’s a very different part of the business that I think we can then start to work more closely with.

Sam Brace: And I think you said it well. I think the fact that with Cloudinary, you can be able to change really any format into another format. And I can’t think of a reason why I would wanna change a PNG to a PSD, but in most cases you would want to go PSD to PNG as you’re showing, or to WebP your JPEG or something along those lines.

But being able to expose details based on clipping paths, [00:43:00] based on layers, that’s something where it’s very helpful because you can give your creative team. The ability to say, put your file on as is. You don’t have to optimize it, you don’t have to export for web, export for screens, give it to me as is and then as a developer you can go and create any type of output off of it, including as we’re showing here, Open Graph content. So this is fantastic.

Ben Seymour: Okay, I have one last thing.

Sam Brace: Oh gosh. Let’s see it. I would love to see it.

Ben Seymour: There we go. One last thing. And we were quite fortunate here cause frankly this only got released two weeks ago.

Sam Brace: I love it.

Ben Seymour: So ultimately, You can imagine doing your local testing. You can imagine dropping into your own WhatsApp and having a look at what comes out the other end.

But one of the things that we always wanna know is what’s this gonna look like to our own customers? So about two weeks ago, if you come into your dashboard, again, this is what you saw earlier. So this is a variety of the releases that I’ve been doing on this particular account. If you come into any one of these, including the preview deployments, we now have a new tab called Open Graph.

[00:44:00] Now, ultimately what this does is this is, there we go. So even against what is exactly a branch, So it’s an experimental release, potentially. This is me and being in a position to see what would this look like to a Twitter user. So it’s all well and good as thinking it’s good, but being able to see what it looks like on Slack or on Facebook or LinkedIn I think is immensely powerful.

It also gives more of a breakdown for more of the aspects within the Open Graph protocol, and it also very helpfully tells us when we’ve maybe forgotten something. So in this case, I forgot to put effectively the URL reference to the canonical link into it. So, I think it’s a great way of verifying that what is about to go out the door is what we hope it’s gonna be. So rather than having to do again that round tripping, there were a few other validators that were sometimes workable. Frankly, they would tend to be a bit hit and miss. There was like a validator on. twitter.dev or dev.Twitter.com.

But this gives all of these in one place, straight into your project, and it also allows you to really run experiments, do a branch run experiment, have a look at this straight in the same place, and [00:45:00] then let’s face it, what you hopefully want to go and do is, if you’re very happy with the results.

You could literally then come along and have this as part of your deployment step. So in some cases this might be that where you go, we’re now happy that even the OG image is ready. Let’s promote this to production. Something like that.

Sam Brace: Well and the key thing I think that you said to me that I was like, oh, yep, that’s why this matters, is that it’s about things that are not in production yet, these are things that will be in production, and a lot of these testers that I’ve have found when it comes to Open Graph, it’s a way to validate something, but it’s already been pushed live because you’re able to scrape the URL. And this is where, based on what you’re showing here, this is something where it’s not deployed yet and you’re still able to test a lot of these various aspects against the way that these services like Twitter and Slack would interpret the Open Graph data that you’re giving to this before everything’s published -everything’s live- people can see it, and that way you’re not having to retroactively say oops, we made a mistake. You can check literally everything about the deployment before you deploy.

So this is a really big win in my opinion. [00:46:00]

Ben Seymour: Perfect. I think we’ve covered everything that I had in mind. Again the potential I think is limitless. That thing at the beginning, which is our goal is to help help developers to create at the point of inspiration. I think there is so much that you could do here.

I think it’s like you said it’s a massively, if we just look at this one segment of what you can do in terms of the way that your business or your project is expressed I cheated, by the way. So for the how to contact me, the easiest way for me was actually was to actually use one of these tools very quickly to chuck it up there.

Yeah. This to me is quicker than frankly, opening the slides tool and adding it in there in many cases. So I think that created the point of inspiration, experiment, local iterations. The faster you can move, the faster you can find what works and what doesn’t work. The faster you can get feedback, the faster you can do that next cycle.

I think this is the way that we ultimately find our organizational and our team health, if that makes sense. Let’s face it if I [00:47:00] think of the number of changes that happened in our industry in. We talked about in the last 10 years in terms of the growth of mobile and social tool intensive purposes.

But I, I think kind of 2020 through to 2022, obviously there were a lot of health challenges that caused a lot of the biggest changes to all of our everyday lives. The ability to developers to be able to go and figure out how on earth to help their business survive in that environment, I think that’s something that, that we can both greatly help lots of people with and hopefully help them be very successful and their business is healthy as well as they go.

Sam Brace: Absolutely. Absolutely. I, and I think the biggest takeaways that I’m seeing here is that one, the image gallery situation that you in showed to me, it has a so much applicability to, I would say, lots of different businesses because the example that you gave. That it makes perfect sense. You were trying to do a summary of content that happened around an event, which was Next JS conference, but I could also even see this applied for e-commerce purposes, where if I’m trying to show a collection [00:48:00] of all of the shirts that we’re gonna be debuting and have that, where now I have a developer say, Just point to this folder and now we can display all this and then give this out to the media or to an agency and they can be able to see all of this.

Its ways to take a lot of the concepts that Cloudinary has done with collections, but make sure that they’re being able to show hundreds of them and also in this nice gallery format. So it’s one way to take additional steps forward with that. So I think there’s if I was watching this.

Even if I wasn’t a developer, I would be able to see there’s a lot of use case behind that image gallery that someone can bring into the business today. With the two businesses, of course, helping along the way.

Ben Seymour: So the thing that if you ever invite me back, the thing I’d like to talk about next time is that effectively the latest version of Next JS went into stable last week.

Sam Brace: Okay.

Ben Seymour: And it allows us to have, so in the version we looked at earlier, it was the page level data fetching the latest version, which is called [00:49:00] the app reactor effectively allows us to have independent components. Within a page, each of them doing their own independent data fetching. So what I showed you earlier was this page, let’s refresh this page every hour, whatever it was.

In this instance, we can say, the top section the nav and the footer will not change or at least will not change for a long time. And you can then have independent boundaries. This is all of the back of I think all React server components that came out. React 18. This allows us to have completely independent pockets or components, or you might wanna say composable architectures, which would allow us to effectively, take everything we’ve just seen right now, but make it effectively at the component level. So now we can start to have everything we’ve just seen, but as being a subsection of your page and then reused across different pages as well.

So I think this is where I imagine we’ll find that a lot of traction is found. I think so.

Sam Brace: Oh yeah. Cause now if you think about it, like you could have multiple galleries, if I’m understanding that correctly. And then it’s [00:50:00] where you can, if so many brands have these brand portals or they have these like media rooms where we could say, here’s a picture of all of our CEOs and here’s all of our brand assets, and then here’s like our latest press releases, all that stuff.

If you had them where individual pieces and you’re all able to say, point to this folder, point to that folder, point to the other folder. And it just keeps getting updated. That’s huge. And that gives people an immediately developer friendly media portal that they can work off of. Ben, that’s pretty slick.

Ben Seymour: I love the idea. And we got, we have got a minute left, haven’t we? So I love the idea of e-commerce website a PDP per detail page. There’s a component lower down, which is like the product in use. Which effectively is customer uploaded via a load of the Cloudinary tools with auto moderation turned on.

But then allows us to fairly streamline the entire, that workflow, which then would couple in with the kind of the automatic recognition tools to then allow us to go, this component should be [00:51:00] anything that is being tagged as being suitable an on-brand of the right product, and then it gets pulled in.

So your product in use is effectively, almost like able to update kind of day-to-day as people post things onto social media or if it’s a big event. Obviously, we we had a big event in the UK a couple of days ago and lots of people wore interesting clothes. This is the kind of event that then gets a lot of media attention if you have to be a brand that is trying to totally relate in that world, having those very up-to-date components of project and use or, social usage.

I think it’s massively difficult to do. Without the right tooling but also massively powerful as well.

Sam Brace: Oh, absolutely. Absolutely. And I think the other big thing that I’m standing out to our, and it’s not the first time we’ve ever said it, but it’s where I think the way that it’s been positioned in this episode is that when you’re thinking about a project and releasing it, truly like what are all the components of this?

One thing that development teams should be asking for and seeing how they can help with is, Open Graph is before we push this thing live, before people are gonna [00:52:00] start consuming this, do we have Open Graph content for it? And I think with the power of that Vercels developed with all of the OG image generation, it makes it that’s something that actually happens.

It’s not where you now have to go off to a creative team. You have to go off to somewhere else and say, go make this for us and bring it back. Or just bring through the header of the post, which sometimes is not correct. So it’s to say no, we’re gonna create new, unique content, but it makes sure it happens with every deployment.

So I think that’s really big and it’s something that I hope more that are tied to project deployment start thinking about as this is a necessary component of the process and the project.

Ben Seymour: So this is my blue sky email. Twitter, yeah. Do we have a way of getting links out to people? So can we do follow ones?

Sam Brace: Great question. And it’s a great segue, Ben, because at the very end of this episode, of course, we’ll always be able to release this out to the various networks that we happen to be on. So that’s gonna be [00:53:00] on YouTube, Spotify, Cloudinary Academy, of course, other places, and we’ll always include deep show notes so that way all the links of things that I’ve referenced that Ben has referenced, they’ll all be available and that’s a great way for me to bring it back to be able to explain that.

All of that, of course, is on our cloudinary.com/podcasts page. So as you can see, looking at a previous episode where our friends, Amy and James from Compressed.FM podcast. You’ll see that we have lists of all the places where you can reference the details. We have full transcripts of all of that.

And one thing, I don’t know if, Ben, you’ve seen this, but I love showing this off, is that these are all little JavaScript calls. So if I click onto this, it’ll actually jump you to that particular minute mark of the episode. So if you’re seeing something like, when did they talk about that, it’ll go straight to that portion.

So lots of nice little usability details that we have when it comes to the ways that these podcasts are debuted. But yes, all links will [00:54:00] be available once this is live past the live stream.

So I would say this was good.

So Ben, thank you for being part of this program and of course we’ve given lots of people, lots of ways to communicate with you, whether it’s through your email, whether it’s through your Twitter account. I’m of course you’re very active on LinkedIn as well. Is there any other places where people can communicate with you? I know that you have a really nice personal page. Is that one that was mentioned on that?

Ben Seymour: There is also benseymour.com as well, but yeah, lots of places there. But yeah for everything else, we’ll share the links obviously. There’s me personally, there’s also Vercel

there’s obviously an entire team that will help answer any other questions that we have. And if it turns out that we need to get other people involved, we can always get either the DevRel team involved or some of the community people and other people as well. Amazing.

Sam Brace: Wonderful.

Ben Seymour: Thank you, Sam.

Sam Brace: Wonderful. Ben, it’s been such a pleasure to have you here and thanks again for being a part of this and for everybody that’s watching and listening. Thank you for participating and [00:55:00] enjoying this program from Cloudinary. And we hope to see you watching listening to future episodes of DevJams. So take care and we’ll see you soon.

Ben Seymour: Thank you all.