---
title: "Renderers"
description: "Choose the right renderer for your OG images."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers"
last_updated: "2026-08-19T01:24:27.724Z"
---
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
| Feature | [Takumi](/docs/og-image/renderers/takumi) | [Satori](/docs/og-image/renderers/satori) | [Browser](/docs/og-image/renderers/browser) |
| ---------------- | ----------------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- |
| | **Recommended** | | |
| **Speed** | Fastest (2-10x) | Fast | Slow |
| **Edge Runtime** | ✅ | ✅ | [Cloudflare](/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`
`@takumi-rs/wasm` | `satori`
`@resvg/resvg-js`
`@resvg/resvg-wasm` | `playwright-core` |
## Environment Compatibility
| Environment | Satori | Takumi | Browser |
| ------------------------------------ | ------ | ------------------- | ------------------------------------------------------------------------------------ |
| [Node.js](https://nodejs.org) | ✅ | ✅ `@takumi-rs/core` | ✅ `playwright-core` |
| 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](/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
| Cloudflare Pages | ✅ Wasm | ✅ Wasm | ✅ [Browser Rendering](/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
| [StackBlitz](https://stackblitz.com) | ✅ Wasm | ✅ Wasm | ❌ |
### 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()`{lang="ts"}
- **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')`{lang="ts"}, 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')`{lang="ts"}.
::
## 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.
::
## 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.