Renderers · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

**OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

[User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction)

[API](https://nuxtseo.com/docs/og-image/api/define-og-image)

[Releases](https://nuxtseo.com/docs/og-image/releases/v6)

OG Image

- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Og Image

# Renderers

[Copy for LLMs](https://nuxtseo.com/docs/og-image/renderers.md)

Nuxt OG Image supports three rendering engines, each with different trade-offs. We recommend [Takumi](https://nuxtseo.com/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](#comparison)

| Feature | [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) | [Satori](https://nuxtseo.com/docs/og-image/renderers/satori) | [Browser](https://nuxtseo.com/docs/og-image/renderers/browser) |
| --- | --- | --- | --- |
|  | **Recommended** |  | |
| **Speed** | Fastest (2-10x) | Fast | Slow |
| **Edge Runtime** | ✅ | ✅ | [Cloudflare](https://nuxtseo.com/docs/og-image/renderers/browser#cloudflare-browser-rendering) only |
| **CSS Support** | Complete | Partial | Full |
| **Gradients** | ✅ | ✅ | ✅ |
| **Opacity** | ✅ | ✅ | ✅ |
| **Flexbox** | ✅ | ✅ | ✅ |
| **CSS Grid** | ✅ | ❌ | ✅ |
| **Shadows** | ✅ | Partial | ✅ |
| **Transforms** | ✅ 2D/3D | ❌ | ✅ |
| **Filters** | ✅ | ❌ | ✅ |
| **Emoji** | ✅ COLR fonts | ✅ 11 families | ✅ |
| **Fonts** | WOFF2, variable | Google Fonts, local | Any |
| **Dependencies** | `@takumi-rs/core` | `satori` `@resvg/resvg-js` | `playwright` |

## [Environment Compatibility](#environment-compatibility)

| Environment | Satori | Takumi | Browser |
| --- | --- | --- | --- |
| [Node.js](https://nodejs.org) | ✅ | ✅ `@takumi-rs/core` | ✅ `playwright` |
| Prerender / CI | ✅ | ✅ | ✅ Auto-installs |
| AWS Lambda | ✅ | ✅ | ❌ Binary too large |
| [Vercel](https://vercel.com) | ✅ | ✅ | ❌ |
| Vercel Edge | ✅ Wasm | ✅ Wasm | ❌ |
| [Netlify](https://netlify.com) | ✅ | ✅ | ❌ |
| Netlify Edge | ✅ Wasm | ✅ Wasm | ❌ |
| Cloudflare Workers | ✅ Wasm | ✅ Wasm | ✅ [Browser Rendering](https://nuxtseo.com/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
| Cloudflare Pages | ✅ Wasm | ✅ Wasm | ✅ [Browser Rendering](https://nuxtseo.com/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
| [StackBlitz](https://stackblitz.com) | ✅ Wasm | ✅ Wasm | ❌ |

### [Binding Types](#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](#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](https://nuxtseo.com/docs/og-image/renderers/browser#cloudflare-browser-rendering) binding
- Sharp unavailable
- Requires the `ASSETS` binding for font loading at runtime. See [Cloudflare deployment](https://nuxtseo.com/docs/og-image/guides/cloudflare) for setup

### [Overriding Compatibility](#overriding-compatibility)

You can override the default compatibility settings:

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](#component-naming-convention)

OG Image components must include the renderer in their filename:

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

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

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

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

## [Choosing a Renderer](#choosing-a-renderer)

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

### [Use Takumi (Recommended)](#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:

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

### [Use Satori](#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:

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

### [Use Browser](#use-browser)

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

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

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

## [Zero Runtime Mode](#zero-runtime-mode)

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

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.

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/2.renderers/0.index.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/renderers.md)

Did this page help you?

[Tutorial: Your first OG Image Get started with the module by setting up your first og:image on your home page.](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image) [Takumi Renderer The recommended renderer for OG image generation - 2-10x faster with comprehensive CSS support.](https://nuxtseo.com/docs/og-image/renderers/takumi)

On this page

- [Comparison](#comparison)
- [Environment Compatibility](#environment-compatibility)
- [Component Naming Convention](#component-naming-convention)
- [Choosing a Renderer](#choosing-a-renderer)
- [Zero Runtime Mode](#zero-runtime-mode)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)