---
title: "Renderers"
description: "Choose the right renderer for your OG images."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers"
last_updated: "2026-05-09T14:44:12.987Z"
---

Nuxt OG Image supports three rendering engines, each with different trade-offs. We recommend [Takumi](/docs/og-image/renderers/takumi) for the best balance of speed and CSS support.

All renderers share core features: [Tailwind CSS](https://tailwindcss.com) support, custom fonts (Google Fonts, local, variable, WOFF2), emoji rendering, and edge runtime compatibility.

## Comparison

<table>
<thead>
  <tr>
    <th>
      Feature
    </th>
    
    <th>
      <a href="/docs/og-image/renderers/takumi">
        Takumi
      </a>
    </th>
    
    <th>
      <a href="/docs/og-image/renderers/satori">
        Satori
      </a>
    </th>
    
    <th>
      <a href="/docs/og-image/renderers/browser">
        Browser
      </a>
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      
    </td>
    
    <td>
      <strong>
        Recommended
      </strong>
    </td>
    
    <td>
      
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Speed
      </strong>
    </td>
    
    <td>
      Fastest (2-10x)
    </td>
    
    <td>
      Fast
    </td>
    
    <td>
      Slow
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Edge Runtime
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      <a href="/docs/og-image/renderers/browser#cloudflare-browser-rendering">
        Cloudflare
      </a>
      
       only
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        CSS Support
      </strong>
    </td>
    
    <td>
      Complete
    </td>
    
    <td>
      Partial
    </td>
    
    <td>
      Full
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Gradients
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Opacity
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Flexbox
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        CSS Grid
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ❌
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Shadows
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      Partial
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Transforms
      </strong>
    </td>
    
    <td>
      ✅ 2D/3D
    </td>
    
    <td>
      ❌
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Filters
      </strong>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ❌
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Emoji
      </strong>
    </td>
    
    <td>
      ✅ COLR fonts
    </td>
    
    <td>
      ✅ 11 families
    </td>
    
    <td>
      ✅
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Fonts
      </strong>
    </td>
    
    <td>
      WOFF2, variable
    </td>
    
    <td>
      Google Fonts, local
    </td>
    
    <td>
      Any
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Dependencies
      </strong>
    </td>
    
    <td>
      <code>
        @takumi-rs/core
      </code>
      
      <br />
      
      <code>
        @takumi-rs/wasm
      </code>
    </td>
    
    <td>
      <code>
        satori
      </code>
      
      <br />
      
      <code>
        @resvg/resvg-js
      </code>
      
      <br />
      
      <code>
        @resvg/resvg-wasm
      </code>
    </td>
    
    <td>
      <code>
        playwright-core
      </code>
    </td>
  </tr>
</tbody>
</table>

## Environment Compatibility

<table>
<thead>
  <tr>
    <th>
      Environment
    </th>
    
    <th>
      Satori
    </th>
    
    <th>
      Takumi
    </th>
    
    <th>
      Browser
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://nodejs.org" rel="nofollow">
        Node.js
      </a>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅ <code>
        @takumi-rs/core
      </code>
    </td>
    
    <td>
      ✅ <code>
        playwright-core
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Prerender / CI
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅ Auto-installs
    </td>
  </tr>
  
  <tr>
    <td>
      AWS Lambda
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ❌ Binary too large
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://vercel.com" rel="nofollow">
        Vercel
      </a>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ❌
    </td>
  </tr>
  
  <tr>
    <td>
      Vercel Edge
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ❌
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://netlify.com" rel="nofollow">
        Netlify
      </a>
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ✅
    </td>
    
    <td>
      ❌
    </td>
  </tr>
  
  <tr>
    <td>
      Netlify Edge
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ❌
    </td>
  </tr>
  
  <tr>
    <td>
      Cloudflare Workers
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ <a href="/docs/og-image/renderers/browser#cloudflare-browser-rendering">
        Browser Rendering
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Cloudflare Pages
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ <a href="/docs/og-image/renderers/browser#cloudflare-browser-rendering">
        Browser Rendering
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://stackblitz.com" rel="nofollow">
        StackBlitz
      </a>
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ✅ Wasm
    </td>
    
    <td>
      ❌
    </td>
  </tr>
</tbody>
</table>

### Binding Types

Each renderer can use different bindings depending on the environment:

- **node** - Default Node.js binding, best performance
- **Wasm** - [WebAssembly](https://webassembly.org) binding for edge runtimes and workers
- **wasm-fs** - WebAssembly with filesystem access (dev environments like StackBlitz)
- **false** - Disabled

### Provider Notes

**AWS Lambda, Netlify, Vercel (Serverless)**

- Browser unavailable (binary too large)
- Sharp unavailable (post-install script issues)

**Vercel Edge, Netlify Edge**

- Satori and Takumi use Wasm automatically
- Browser and Sharp unavailable

**Cloudflare Workers/Pages**

- Satori and Takumi use Wasm automatically
- Browser available via [Cloudflare Browser Rendering](/docs/og-image/renderers/browser#cloudflare-browser-rendering) binding
- Sharp unavailable
- Requires the `ASSETS` binding for font loading at runtime. See [Cloudflare deployment](/docs/og-image/guides/cloudflare) for setup

### Overriding Compatibility

You can override the default compatibility settings:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      // disable browser for prerendering (skips install in CI)
      prerender: {
        browser: false
      },
      // force WASM binding at runtime
      runtime: {
        resvg: 'wasm'
      }
    }
  }
})
```

## Component Naming Convention

OG Image components must include the renderer in their filename:

```bash
components/OgImage/
  MyTemplate.takumi.vue    # Takumi renderer (recommended)
  MyTemplate.satori.vue    # Satori renderer
  Screenshot.browser.vue   # Browser renderer
```

This enables:

- **Automatic renderer detection** - no need to specify `renderer` in `defineOgImage()`
- **Tree-shaking** - unused renderer code is excluded from production builds

<tip>

**The module supports multiple renderers for the same component name.**

You can create both `MyTemplate.satori.vue` and `MyTemplate.takumi.vue`. When calling `defineOgImage('MyTemplate')`, the module uses the first registered variant. To select a specific renderer, use dot notation:

```ts
defineOgImage('MyTemplate.takumi')
```

You can also use PascalCase: `defineOgImage('MyTemplateTakumi')`.

</tip>

## Choosing a Renderer

The component filename suffix determines the renderer - there is no global `defaults.renderer` config.

### Use Takumi (Recommended)

Takumi is the recommended renderer. It's 2-10x faster than Satori with complete CSS support including gradients, shadows, opacity, CSS Grid, transforms, and filters:

```bash
components/OgImage/MyTemplate.takumi.vue
```

### Use Satori

Satori requires `satori` and `@resvg/resvg-js` (or `@resvg/resvg-wasm` for edge runtimes) as peer dependencies. It has good CSS support for most templates:

```bash
components/OgImage/MyTemplate.satori.vue
```

### Use Browser

Choose Browser when you need full CSS support and are prerendering all images at build time:

```bash
components/OgImage/MyTemplate.browser.vue
```

<warning>

Browser is slow and doesn't work on most hosting providers at runtime. Only use it for prerendering.

</warning>

## Zero Runtime Mode

If you're prerendering all OG images at build time, enable [Zero Runtime](/docs/og-image/guides/zero-runtime) mode to remove all renderer code from your production bundle (81% smaller Nitro output).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    zeroRuntime: true
  }
})
```

This works with any renderer and is ideal when your OG images don't change dynamically.