Home/Performance/Introducing OG Image Generation: Fast, dynamic social card images at t

Performance

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

Announcing Vercel OG Image Generation, a new library for generating dynamic social card images.

V

VercelVercel

·October 10, 2022

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

Vercel has introduced @vercel/og, an open-source library for generating dynamic Open Graph images using HTML and CSS. The approach runs on Edge Functions with WebAssembly and a new core library called Satori that converts HTML/CSS into SVGs, avoiding the need to launch a headless browser for every image request.

The old approach to dynamic OG images relied on Chromium inside a Serverless Function, where Puppeteer screenshot the page. That worked but was increasingly impractical: Chromium continues to grow past the size of Serverless Function limits, cold boots took around four seconds, and the setup caused frequent errors. Vercel OG, by contrast, runs at roughly 500KB compared to the 50MB footprint of Chromium and Puppeteer. That lightweight footprint makes the generator a better fit for edge environments where compute runs near the user.

Production measurement on vercel.com/docs showed measurable improvement: P99 TTFB dropped from 4.96 seconds to 0.99 seconds, with P90 improving from 4 seconds to 0.75 seconds. The library handles layout and styling with basic CSS—including sub-setting fonts and emoji pulled from Google Fonts. It is framework-agnostic.

How the image pipeline works

Vercel OG builds on core engine Satori, which runs in modern browsers, Node.js, and Web Workers. On top of that engine, Vercel OG maps React components into HTML and CSS, making images co-locatable with the rest of a frontend codebase. The library adds Cache-Control headers so generated images are cached at the edge.

import { ImageResponse } from '@vercel/og'
export const config = {
  runtime: 'experimental-edge',
}
export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    )
  )
}

Using OG components inside a Next.js app can then look like this in an edge function:

'content-type': 'image/png'
'cache-control': 'public, immutable, no-transform, max-age=31536000'

A standard approach would create an API route that returns an image. With Vercel OG, that route runs as an Edge Function and therefore inherits Vercel Edge Functions pricing. A generated social card can be served via that same route, and the built-in caching reduces the need for every request to reach the origin.

Tailwind and link preview performance

Vercel OG ships with Tailwind CSS support through the tw prop, which lets developers restyle OG images with the same utility system used for the rest of the application.

<div tw="flex h-full items-center bg-white justify-center">
  <div tw="bg-gray-50 flex">
    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
        <span>Ready to dive in?</span>
        <span tw="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div tw="mt-8 flex md:mt-0">
        <div tw="flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
        </div>
        <div tw="ml-3 flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
        </div>
      </div>
    </div>
  </div>
</div>

The example OG image using Tailwind CSS with Vercel OG.

An example Vercel OG image, modified from the Tailwind UI marketing section.

So far, Vercel reports that images can generate in as low as a sub-second response time. When rolling it out for Next.js Conf, ticket images generated in 800ms on average. During the same test it requested two fonts plus two external image fetches and then composited extra SVG layers.

Because the system returns to the frontend with CSS layout logic, existing CSS tactics can handle line breaks, wrapping names, and failover for characters outside the primary font fallback spectrum.