Skip to main content

Satori

Add Unicode Private Area Support #161 Merged

Merged! Add Unicode Private Area Support #161

Resourcesโ€‹

Introducing OG Image Generation: Fast, dynamic social card images at the Edge - Vercelโ€‹

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

@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 Emojis Subsets from Google Fonts and other CDNs
  • Tailwind CSS with the tw prop
  • 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.

Backstory by Shuโ€‹