4 ms·

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

• MaxLeiter 4y 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/ https://og-playground.vercel.app/
• steventey 4y ago
  this is a gamechanger! also https://github.com/vercel/satori https://github.com/vercel/satori is such a good name!
• alvarlagerlof 4y ago
  There's my library for generating og:images statically pretty much dead. I was always wondering why Vercel didn't do this.
  • pzrsa 4y ago
    Care to share it? Curious to see your approach
    • alvarlagerlof 4y ago
      Sure. This is what I did first. https://github.com/alvarlagerlof/next-banner 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 https://github.com/alvarlagerlof/ogimage
  • deleted 4y ago
    [deleted]
  • lloydatkinson 4y ago
    Well it won't be dead. The vercel one seems to only support running on vercel.
    • alvarlagerlof 4y ago
      They also have satori, which will run anywhere it seems.
      • lloydatkinson 4y ago
        That seems to generate svgs which as far as I know no site will show og embeds with svgs for some reason
        • pzrsa 4y ago
          I use svgs for my websites og images, haven't come across an issue with embeds on most platforms.
        • shuding 4y ago
          There are already a lot of choices to convert SVGs to PNGs, what Vercel uses is https://github.com/yisibl/resvg-js https://github.com/yisibl/resvg-js. And Sharp is another good option.