ImageResponse

Last updated June 16, 2025

TheImageResponse constructor allows you to generate dynamic images using JSX and CSS. This is useful for generating social media images such as Open Graph images, Twitter cards, and more.

Reference

Parameters

The following parameters are available forImageResponse:

import { ImageResponse }from'next/og'newImageResponse(  element: ReactElement,  options: {    width?: number=1200    height?: number=630    emoji?:'twemoji'|'blobmoji'|'noto'|'openmoji'='twemoji',    fonts?: {      name: string,      data: ArrayBuffer,      weight: number,      style:'normal'|'italic'    }[]    debug?: boolean=false// Options that will be passed to the HTTP response    status?: number=200    statusText?: string    headers?: Record<string, string>  },)

Examples are available in theVercel OG Playground.

Supported HTML and CSS features

ImageResponse supports common CSS properties including flexbox and absolute positioning, custom fonts, text wrapping, centering, and nested images.

Please refer toSatori’s documentation for a list of supported HTML and CSS features.

Behavior

ImageResponse uses@vercel/og,Satori, and Resvg to convert HTML and CSS into PNG.
Only flexbox and a subset of CSS properties are supported. Advanced layouts (e.g.display: grid) will not work.
Maximum bundle size of500KB. The bundle size includes your JSX, CSS, fonts, images, and any other assets. If you exceed the limit, consider reducing the size of any assets or fetching at runtime.
Onlyttf,otf, andwoff font formats are supported. To maximize the font parsing speed,ttf orotf are preferred overwoff.

Examples

Route Handlers

ImageResponse can be used in Route Handlers to generate images dynamically at request time.

app/api/route.js

import { ImageResponse }from'next/og'exportasyncfunctionGET() {try {returnnewImageResponse(      (        <divstyle={{            height:'100%',            width:'100%',            display:'flex',            flexDirection:'column',            alignItems:'center',            justifyContent:'center',            backgroundColor:'white',            padding:'40px',          }}        >          <divstyle={{              fontSize:60,              fontWeight:'bold',              color:'black',              textAlign:'center',            }}          >            Welcome to My Site          </div>          <divstyle={{              fontSize:30,              color:'#666',              marginTop:'20px',            }}          >            Generated with Next.js ImageResponse          </div>        </div>      ),      {        width:1200,        height:630,      }    )  }catch (e) {console.log(`${e.message}`)returnnewResponse(`Failed to generate the image`, {      status:500,    })  }}

File-based Metadata

You can useImageResponse in aopengraph-image.tsx file to generate Open Graph images at build time or dynamically at request time.

app/opengraph-image.tsx

import { ImageResponse }from'next/og'// Image metadataexportconstalt='My site'exportconstsize= {  width:1200,  height:630,}exportconstcontentType='image/png'// Image generationexportdefaultasyncfunctionImage() {returnnewImageResponse(    (// ImageResponse JSX element      <divstyle={{          fontSize:128,          background:'white',          width:'100%',          height:'100%',          display:'flex',          alignItems:'center',          justifyContent:'center',        }}      >        My site      </div>    ),// ImageResponse options    {// For convenience, we can re-use the exported opengraph-image// size config to also set the ImageResponse's width and height....size,    }  )}

Custom fonts

You can use custom fonts in yourImageResponse by providing afonts array in the options.