Vercel OG Image Generation: Fast, dynamic social card images at the Edge

MaxLeiter 3y ago ↗

I had the chance to work with Vercel OG / Satori a little while ago for Vercel's Next.js conference. I expected the OG cards for our word game to take hours, but it took minutes instead. Huge productivity boost.

You can try the playground with examples here: https://og-playground.vercel.app/

steventey 3y ago ↗

this is a gamechanger! also https://github.com/vercel/satori is such a good name!

alvarlagerlof 3y ago ↗

There's my library for generating og:images statically pretty much dead. I was always wondering why Vercel didn't do this.

pzrsa 3y ago ↗

Care to share it? Curious to see your approach

alvarlagerlof 3y ago ↗

Sure. This is what I did first. https://github.com/alvarlagerlof/next-banner. Its using one puppeteer process at build, for static sites. Made for Next.js.

However I was working on another version, which just reads html files for metadata instead. Not really shareable and working, built it's using vite to build a few different frameworks. https://github.com/alvarlagerlof/ogimage

[deleted] 3y ago ↗

(comment deleted)

lloydatkinson 3y ago ↗

Well it won't be dead. The vercel one seems to only support running on vercel.

alvarlagerlof 3y ago ↗

They also have satori, which will run anywhere it seems.

lloydatkinson 3y ago ↗

That seems to generate svgs which as far as I know no site will show og embeds with svgs for some reason

pzrsa 3y ago ↗

I use svgs for my websites og images, haven't come across an issue with embeds on most platforms.

shuding 3y ago ↗

There are already a lot of choices to convert SVGs to PNGs, what Vercel uses is https://github.com/yisibl/resvg-js. And Sharp is another good option.

Vercel OG Image Generation: Fast, dynamic social card images at the Edge (vercel.com)

11 comments