Renderers

Nuxt OG Image supports three rendering engines, each with different trade-offs.

Comparison

Environment Compatibility

Binding Types

Each renderer can use different bindings depending on the environment:

• node - Default Node.js binding, best performance
• wasm - WebAssembly 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)

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

Vercel Edge, Netlify Edge, Cloudflare Pages

• Satori and Takumi use WASM automatically
• Chromium and Sharp unavailable

Cloudflare Workers

• Satori and Takumi use WASM automatically
• Chromium and Sharp unavailable
• Some limitations with custom fonts and images (issue #63)

Overriding Compatibility

You can override the default compatibility settings:

export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      // disable chromium for prerendering (skips install in CI)
      prerender: {
        chromium: false
      },
      // force WASM binding at runtime
      runtime: {
        resvg: 'wasm'
      }
    }
  }
})

Choosing a Renderer

Use Satori (Default)

Satori is the default renderer and works for most use cases. It has good CSS support and works on all platforms including edge runtimes.

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      renderer: 'satori' // default, not required
    }
  }
})

Use Takumi

Choose Takumi when you need maximum performance with simple templates that use solid colors.

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      renderer: 'takumi'
    }
  }
})

Use Chromium

Choose Chromium when you need full CSS support and are prerendering all images at build time.

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      renderer: 'chromium'
    }
  }
})

Zero Runtime Mode

If you're prerendering all OG images at build time, enable Zero Runtime mode to remove all renderer code from your production bundle (81% smaller Nitro output).

export default defineNuxtConfig({
  ogImage: {
    zeroRuntime: true
  }
})

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