JPEGs

The default image extension generated by Nuxt OG Image for Satori images is a png.

PNGs are great for most use cases, but they come at the cost of a larger file size.

The module supports rendering JPEGs instead of PNGs, but it requires Sharp. The module disables this by default as Sharp is a heavy dependency and compatibility is limited.

If you're prerendering your images or using a Node based environment, you can enable Sharp to render JPEGs.

Browser rendering uses jpeg images by default.

Setup

To install Sharp, you need to install the sharp dependency:

pnpm i -D sharp

yarn add -D sharp

npm install -D sharp

Now you can change your default extension to either jpeg or jpg.

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      extension: 'jpeg',
    }
  },
})

Best Practices

While JPEGs are smaller, they are lossy.

• Use PNG (default) for images with text, logos, or flat colors. This ensures sharp edges and readability.
• Use JPEG for images that are primarily photographs or have complex gradients, where file size savings are significant.

Note: Most social platforms (Twitter, Facebook, etc.) will convert your image to JPEG and compress it again. Uploading a crisp PNG often results in a better final quality than uploading an already-compressed JPEG (avoiding "double compression" artifacts).