JPEGs · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

**OG Image v6** is here! Looking for an older version?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

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

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Overview

-
-
-
-

### Integrations

-
-
-

Core Concepts

# JPEGs

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

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

 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](#setup)

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

pnpm

yarn

npm

```
pnpm i -D sharp
```

```
yarn add -D sharp
```

```
npm install -D sharp
```

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

nuxt.config.ts

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

## [Best Practices](#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).

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/3.jpegs.md)

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

Did this page help you?

On this page

- [Setup](#setup)
- [Best Practices](#best-practices)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)