Vercel Product Update

Dynamic with limits

• 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: Because 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 just to take a screenshot was not efficient. This led to large Function sizes, which could be expensive and waste compute.
• Large: Chromium has continued to grow in the past four years. Today, it's  too large to fit in a Serverless Function .

Dynamic without limits

• 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), which allows functions to start almost instantly. This helps ensure images are never too slow to generate and are always recognized by tools like the Open Graph Debugger.



Vercel OG versus the previous implementation with Serverless Functions.

Vercel OG versus the previous implementation with Serverless Functions.

• Support for basic CSS layout, styling, and typography
• Support for use in any framework or frontend application
• Support for downloading font and emoji subsets from Google Fonts and other CDNs

Dynamic social images at the Edge

// pages/api/og.jsx
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>
    )
  )
}

A Next.js Edge API Route to create a dynamic social card image.

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

Caching headers from a generated Vercel OG image.

Our  social card generation  previously used a compressed Chromium release to fit inside the 50mb Serverless Function limit. Due to the size of Chromium, images could take up to 5 seconds to generate, making sharing links feel slow. With Vercel OG, images render almost immediately.

— Ben Schwarz

Tailwind CSS Support

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

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



The example OG image using Tailwind CSS with Vercel OG.

The example OG image using Tailwind CSS with Vercel OG.

Dynamic ticket images for Next.js Conf



With Vercel OG, you can use the power of CSS to wrap layouts, as well as dynamically fetch and subset fonts from CDNs on the fly.

With Vercel OG, you can use the power of CSS to wrap layouts, as well as dynamically fetch and subset fonts from CDNs on the fly.

Try Vercel OG Image Generation

•  View examples 
•  Read the API documentation 
•  Deploy your first social card 

More