Compatibility · 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)

You're viewing **OG Image v5** documentation. For the latest, [switch to v6](https://nuxtseo.com/docs/og-image/getting-started/introduction).

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

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

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

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

v5

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

### Getting Started

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

### Core Concepts

- [Satori Renderer](https://nuxtseo.com/docs/og-image/v5/guides/satori)
- [Chromium Renderer](https://nuxtseo.com/docs/og-image/v5/guides/chromium)
- [Zero Runtime](https://nuxtseo.com/docs/og-image/v5/guides/zero-runtime)
- [Compatibility](https://nuxtseo.com/docs/og-image/v5/guides/compatibility)
- [Route Rules](https://nuxtseo.com/docs/og-image/v5/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/v5/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/v5/guides/jpegs)
- [Fonts](https://nuxtseo.com/docs/og-image/v5/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/v5/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/v5/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/v5/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/v5/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/v5/guides/error-pages)

### Integrations

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

Core Concepts

# Compatibility

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

Nuxt OG Image relies heavily on third-party packages that have different compatibility requirements.

## [Bindings](#bindings)

There are a number of bindings that can be used for each dependency: `node`, `wasm`, `wasm-fs` and `false`.

- `node` binding is for default Node based environments.
- `wasm` and `wasm-fs` bindings are used to run WebAssembly. They are mostly used for WebWorker support.
- `wasm-fs` binding is for using WebAssembly in a development WebWorker development environment such as StackBlitz.
- `false` disables the dependency.

## [Dependencies](#dependencies)

### [`chromium`](#chromium)

**Supports**: `node`

Used to render browser screenshots.

This only works on Node based environments. However, it does not work on AWS Lambda as the Chromium binary is too large.

Due to the rendering times being slow, it's recommended to only use browser screenshots when prerendering them.

### [`satori`](#satori)

**Supports**: `node`, `wasm`, `wasm-fs`

Used to render a HTML vNode tree into OG Images.

This is the default renderer, and works on all environments.

### [`resvg`](#resvg)

**Supports**: `node`, `wasm`, `wasm-fs`

Used to transform SVGs into PNGs. This should work on all environments.

When installing using the `node` binding, it can have issues resolving the correct binary. You may run into an issue like `Cannot resolve "./resvgjs.android-arm64.node"`, in which case you should manually set the binding to `wasm` or `wasm-fs`.

### [`sharp`](#sharp)

**Supports**: `node`

Used to transform PNG to JPEG. This only works on Node based environments.

This is disabled by The dependency is quite heavy so it's disabled by default.

See the [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs) guide for more information.

### [`css-inline`](#css-inline)

**Supports**: `node`, `wasm`, `wasm-fs`

Used to support `<style>` tags within Vue SFCs.

Powered by [css-inline](https://github.com/Stranger6667/css-inline).

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

In some instances, it may be useful to override the compatibility, so you can toggle features or use more optimised bindings for your environment.

```
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      // disable chromium dependency for prerendering (skips the chromium install in CIs)
      prerender: {
        chromium: false
      }
    }
  }
})
```

## [Provider compatibility](#provider-compatibility)

### [Development](#development)

- `sharp`  - will use your local Sharp install
- `chromium`  will use your local Chromium install, if available

### [Prerendering](#prerendering)

- `chromium`  - will use your local Chromium install or install a chromium binary if not found

### [AWS Lamdba, Netlify, Vercel](#aws-lamdba-netlify-vercel)

- `chromium`  - can't be used due to the binary size
- `sharp`  - can't be used due to some post-install scripts issue

### [Vercel Edge, Netlify Edge, Cloudflare Pages](#vercel-edge-netlify-edge-cloudflare-pages)

- `chromium`  - can't be used, no WASM support
- `sharp`  - can't be used, no WASM support

### [Cloudflare Workers](#cloudflare-workers)

- `chromium`  - can't be used, no WASM support
- `sharp`  - can't be used, no WASM support
- `css-inline`  - can't be used, no WASM support

There is an [open issue](https://github.com/harlan-zw/nuxt-og-image/issues/63) for custom fonts and images being broken in Cloudflare Workers. Please reply to the issue if you need this fixed.

### [StackBlitz](#stackblitz)

- `chromium`  - can't be used, no WASM support
- `sharp`  - can't be used, no WASM support

## [Provider Examples](#provider-examples)

All examples are generated from the [Nuxt OG Image Playground](https://github.com/harlan-zw/nuxt-og-image-playground) GitHub repo.

- [Netlify](https://main--nuxt-og-image-playground-netlify.netlify.app)

![](https://nuxt-og-image-playground-netlify.netlify.app/__og-image__/image/og.png?title=Hello+Netlify+%F0%9F%91%8B&description=This+is+a+test+of+Netlify+provider&theme=%2332e6e2)

- [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/)

![](https://nuxt-og-image-playground-netlify-edge.netlify.app/__og-image__/image/og.png?title=Hello+Netlify+Edge+%F0%9F%91%8B&description=This+is+a+test+of+Netlify+Edge+provider&theme=%2332e6e2)

- [Vercel](https://nuxt-og-image-playground-harlan-zw.vercel.app/)

![](https://nuxt-og-image-playground-harlan-zw.vercel.app/__og-image__/image/og.png?title=Hello+Vercel+%F0%9F%91%8B&description=This+is+a+test+of+Vercel+provider&theme=%23121212)

- [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/)

![](https://nuxt-og-image-playground-gkdt.vercel.app/__og-image__/image/og.png?title=Hello+Vercel+Edge+%F0%9F%91%8B&description=This+is+a+test+of+Vercel+Edge+provider&theme=%23121212)

- [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/)

![](https://nuxt-og-image-playground.pages.dev/__og-image__/image/og.png?title=Hello+Cloudflare+Pages+%F0%9F%91%8B&description=This+is+a+test+of+Cloudflare+Pages+provider&theme=%23f6821f)

- [Cloudflare Workers](https://playground.harlanzw.workers.dev/)

![](https://playground.harlanzw.workers.dev/__og-image__/image/og.png?title=Hello+Cloudflare+Workers+%F0%9F%91%8B&description=This+is+a+test+of+Cloudflare+Workers+provider&theme=%23f6821f)

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/3.guides/2.compatibility.md)

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

Did this page help you?

[Zero Runtime Create OG Images without the server runtime overhead.](https://nuxtseo.com/docs/og-image/v5/guides/zero-runtime) [Route Rules Learn how to use route rules to customise your OG Image.](https://nuxtseo.com/docs/og-image/v5/guides/route-rules)

On this page

- [Bindings](#bindings)
- [Dependencies](#dependencies)
- [Overriding compatibility](#overriding-compatibility)
- [Provider compatibility](#provider-compatibility)
- [Provider Examples](#provider-examples)

[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 Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](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)