OG Image Automation: Programmatic Generation Approaches

Manually creating OG images for every piece of content doesn’t scale. Here are proven approaches for automated generation.

Vercel (@vercel/og + Satori)

What: Official Vercel library for rendering React/JSX components as images using Satori (headless rendering).

Performance: ~100ms per image (very fast)

Pros:

• Official support
• Seamless Next.js integration
• Component reuse
• Serverless-compatible

Cons:

• Primarily Vercel-focused
• JSX-only
• Doesn’t use a real browser (edge cases may not render perfectly)

Best for: Next.js projects on Vercel, React teams wanting rapid implementation

Example Code

import { ImageResponse } from '@vercel/og'

export async function GET() {
  return new ImageResponse(
    (
      <div style={{ fontSize: 80, background: '#1a1a1a', color: 'white' }}>
        Your Title Here
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Puppeteer (Headless Chrome)

What: Programmatically control headless Chrome to render HTML and capture screenshots.

Performance: 1-3 seconds per image (slower but maximum flexibility)

Pros:

• Full browser environment
• No platform restrictions
• Generates from any HTML/CSS

Cons:

• Resource-intensive
• Slower
• Requires Chrome/Chromium
• Overkill for simple designs

Best for: Batch generation, complex designs, scheduled generation tasks

Canvas-based Solutions (@napi-rs/canvas)

What: Direct canvas rendering without browser overhead—this is FrameIt’s approach.

Performance: <100ms per image (fastest option)

Pros:

• Extremely fast
• No browser dependency
• Works on any Node.js environment
• What FrameIt uses for its API

Cons:

• More technical setup
• Requires custom rendering code

Best for: Performance-critical applications, high-volume generation, FrameIt integration

SaaS Solutions (Bannerbear, Robolly, Placid)

What: Third-party APIs with template builders and REST interfaces.

Pros:

• No-code template creation
• Handles infrastructure
• Good for non-technical teams

Cons:

• Monthly subscription costs
• External dependency
• API rate limits

Best for: Marketing teams, non-developers, rapid deployment without infrastructure

Comparison Table

Recommendation

Use FrameIt’s API directly for fast, flexible OG image generation across any platform. For Next.js projects specifically on Vercel, @vercel/og provides seamless integration. For batch processing or scheduled generation, Puppeteer offers maximum flexibility despite slower performance.

FrameIt API Example

curl "https://frameit.dev/api/generate?layout=youtube&title=Your%20Title&format=png" -o og-image.png

Here’s an example of what FrameIt’s API can generate - this CTA-focused design is perfect for programmatic generation:

Simple CTA

Centered CTA-focused design with icon and button

Platform Open Graph

Layout Icon, Title & CTA

Background #2563EB

Text title, cta

Images icon

Try this example →

Ready for automated OG image generation? Try FrameIt’s API for the fastest canvas-based solution.