---
title: "Chromium Renderer"
description: "Learn how, when and why to use the Chromium renderer."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/chromium"
last_updated: "2026-05-06T18:46:59.489Z"
---

Nuxt OG Image comes with two ways of rendering your images, the non-default way is using Chromium to take screenshots.

Using Chromium is only recommended when you are prerendering all of your images.

<code-group>

```ts [Set Default]
export default defineNuxtConfig({
  // sets the default renderer to chromium
  ogImage: {
    defaults: {
      renderer: 'chromium'
    }
  }
})
```

```ts [defineOgImageComponent]
defineOgImageComponent('MyOgImage', {
  renderer: 'chromium'
})
```

</code-group>

## Pros

- Much easier to create complex designs
- Render JPEGs without using `sharp`
- Page screenshots are simple and saves time

## Cons

- Requires a Chromium binary to be installed
- Much slower than Satori, using it at runtime is not recommended
- Doesn't work on most hosting providers

## Development Chromium

When running in a development environment, a local Chrome / Chromium binary will be used, if available.

If it's not, then the Chromium renderer will be disabled.

## Prerenderer / CI Chromium

When prerendering your images in a CI environment, the module will automatically install a Chromium binary for you.

If you'd like to opt-out of this, you should disable the binding.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      prerender: {
        chromium: false
      }
    }
  }
})
```

## Runtime Chromium

Chromium will only be enabled by default in runtime environments if you have explicitly included the `playwright`
dependency in your project and the target environment is compatible.

<code-group>

```sh [pnpm]
pnpm i -D playwright
```

```bash [yarn]
yarn add -D playwright
```

```bash [npm]
npm install -D playwright
```

</code-group>

Check the [compatibility](/docs/og-image/guides/compatibility) guide for more information.