Satori
Resources
Introducing OG Image Generation: Fast, dynamic social card images at the Edge - Vercel
- This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs.
- We released og-image.vercel.app four years ago to enable developers to dynamically generate open graph (OG) images by taking a screenshot of an HTML page inside of a Serverless Function
- Indeed, I also used this for a while. anaclumos/cho-sh-og-image: Open Graph Image as a Service. Open Graph Image as a Service
Problems
- Difficult: This solution required launching Chromium in a Serverless Function and taking a screenshot of the given HTML page with Puppeteer. Setting up these tools was hard to implement and often led to errors
- Slow: Chromium needs to be compressed to fit inside a Serverless Function and then decompressed on a cold boot; it's very slow (~4 seconds on average). This can result in slow or broken social card images
- Expensive: Spinning up an entire browser to take a screenshot was not efficient. This led to large Function sizes, which could be expensive and waste computing
- Large: Chromium has continued growing in the past four years. Today, it's [too large to fit in a Serverless Function](https://github.com/vercel/og-image/issues/148)
@vercel/og
- Easy: No headless browser is needed. Using Vercel OG, you can define your images using HTML and CSS and automatically generate dynamic images from the generated SVGs
- Affordable: Vercel Edge Functions are ~160x cheaper than running Chromium in a Serverless Function. Further, generated images can be cached and stored at the Edge
- Fast: Vercel OG (500KB) is 100x more lightweight than Chromium + Puppeteer (50MB). 5x faster in P99 TTFB (4.96s → 0.99s) and 5.3x faster in P90 (4s → 0.75s).
Features
- Basic CSS layout, styling, and typography.
- Works with any framework or frontend application
- Font and Emoji Subsets from Google Fonts and other CDNs
- Tailwind CSS with the
twprop - Handles Cache automatically
Engine
- The core engine, Satori, can be used in modern browsers, Node.js, and Web Workers. Building on top of the core engine, Vercel OG can be used inside Edge environments through WebAssembly to create social card images easily.