https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images Skip to content Join Next.js Conf -Join an online experience developers love. Next.js Conf - * Features * Templates * Integrations * Customers * Enterprise * Pricing ContactLoginSign Up - Back to Blog Monday, October 10th 2022 Company News Monday, October 10th 2022 Introducing OG Image Generation: Fast, dynamic social card images at the Edge Posted by Avatar for shuding Shu Ding @shuding_ Avatar for styfle Steven @styfle Avatar for chibicode Shu Uesugi @chibicode We're excited to announce Vercel OG Image Generation - a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Try it out in seconds. Dynamic with limits The engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social images isn't difficult, handling dynamic images that need to be computed and generated instantly has had limits. We released og-image.vercel.app four years ago to enable developers to dynamically generate social card images by taking a screenshot of an HTML page inside of a Serverless Function. It's since been used by thousands of developers to handle their social images. While functional, this approach came with some downsides: * 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 We've created a new brand new open-source library @vercel/og to generate dynamic social card images. Vercel OG is: * 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 be recognized by tools like the Open Graph Debugger. Our results from usage on vercel.com/docs show Vercel OG is 5x faster in P99 TTFB (4.96s - 0.99s) and 5.3x faster in P90 (4s - 0.75s) than our previous version. Further, the code is colocated with the rest of the application for easier maintenance and updates. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG versus the previous implementation with Serverless Functions. Vercel OG also supports the following features: * 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 Vercel OG converts HTML and CSS into images. The core engine, Satori, can be used in modern browsers, Node.js, and Web Workers. Building on top of the core engine, Vercel OG is able to be used inside Edge environments through WebAssembly to easily create social card images. By leveraging the React component abstraction, social cards can be co-located with the rest of your frontend codebase. For example, inside a Next.js application: // pages/api/og.jsx import { ImageResponse } from '@vercel/og' export const config = { runtime: 'experimental-edge', } export default function () { return new ImageResponse( (
Hello, World!
) ) } A Next.js Edge API Route to create a dynamic social card image. Vercel OG automatically adds the correct Cache-Control headers to ensure the image is cached at the Edge after it's been generated. 'content-type': 'image/png' 'cache-control': 'public, immutable, no-transform, max-age=31536000' Caching headers from a generated Vercel OG image. View more examples or read the API documentation. Tailwind CSS Support Vercel OG also includes support for using Tailwind CSS with the tw prop.

Ready to dive in? Start your free trial today.

Get started
Learn more
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. View this example in the Vercel OG Playground. Dynamic ticket images for Next.js Conf We were able to put Vercel OG Image to the test at Next.js Conf by creating dynamic ticket images for every attendee. With over 78,000 tickets created so far, we've seen images generated on average in 800ms. That sub-second response includes loading two custom fonts, two external requests to fetch the GitHub avatar and ticket background images, as well as two embedded SVG images. Since we have the power of CSS, it's easy to handle wrapping names that could break the layout, as well as supporting special characters outside of the font glyph range. 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. 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 Vercel OG Image Generation using Vercel Edge Functions is available today in public beta. * View examples * Read the API documentation * Deploy your first social card Posted by Avatar for shuding Shu Ding @shuding_ Avatar for styfle Steven @styfle Avatar for chibicode Shu Uesugi @chibicode Develop. Preview. Ship. The development platform for the best frontend teams. Start DeployingGet a Demo [ ] Frameworks * Next.js * Create React App * Svelte * Nuxt * Gatsby * Vue * Angular * More Frameworks [ ] Resources * Documentation * Experts * Customers * Guides * Help * API Reference * OSS * Command-Line * Integrations [ ] Company * Home * Blog * Changelog * About * Careers * Pricing * Enterprise * Security * Next.js Conf * Partners * Contact Us [ ] Legal * Privacy Policy * Terms of Service * Trademark Policy * Inactivity Policy * DMCA Policy * Support Terms * DPA * SLA * Sub-processors * Cookie Preferences * Event Terms and Conditions * Job Applicant Privacy Notice Copyright (c) 2022 Vercel Inc. All rights reserved. * *