SA
메인 내용으로 이동

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 Emoji Subsets from Google Fonts and other CDNs
  • Tailwind CSS with the tw prop
  • Handles Cache automatically

Engine

Backstory by Shu