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

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

10/10/2022

What this post added

Introduced Vercel OG Image Generation, a new library (`@vercel/og`) for generating dynamic social card images. This system leverages Vercel Edge Functions and WebAssembly, converting HTML/CSS into SVGs via the Satori engine. It offers significant performance improvements (5x faster P99 TTFB, 5.3x faster P90) and cost reductions compared to the previous Chromium-based Serverless Function approach. Key features include ease of use (no headless browser), affordability, speed, lightweight design, support for basic CSS, framework-agnostic usage, font/emoji subsetting, Tailwind CSS support via the `tw` prop, and automatic edge caching headers. The system was successfully used to generate dynamic ticket images for Next.js Conf.

Read the original post ↗