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.
You can opt-in we can render JPEGs instead of PNG but it requires Sharp. This is disabled 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.
For Chromium rendering, jpeg images are rendered 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).