Satori

Warning

This post is more than a year old. Information may be outdated.

ALT: Add Unicode Private Area Support #161 Merged

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

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

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).

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.

Backlinks5