Nuxt Image comes with a preconfigured instance of ipx . An open source, self-hosted image optimizer based on sharp .

Using ipx in production

Use IPX for self-hosting as an alternative to use service providers for production.

You don't need to follow this section if using target: 'static'.

Runtime Module

Just add @nuxt/image to modules (instead of buildModules) in nuxt.config. This will ensure that the /_ipx endpoint continues to work in production.

Advanced: Custom ServerMiddleware

If you have a use case of a custom IPX instance serving other that static/ dir, you may instead create a server Middleware that handles the /_ipx endpoint:

  1. Add ipx as a dependency: 
yarn add ipx

npm install ipx
  1. Create server/middleware/ipx.js:
server/middleware/ipx.js
import { createIPX, createIPXMiddleware } from 'ipx'

// https://github.com/unjs/ipx
const ipx = createIPX({
  dir: '', // absolute path to images dir
  domains: [], // allowed external domains (should match domains option in nuxt.config)
  alias: {}, // base alias
  sharp: {}, // sharp options
})

export default createIPXMiddleware(ipx)
  1. Add /_ipx to serverMiddleware:
nuxt.config.js
export default {
  serverMiddleware: {
    '/_ipx': '~/server/middleware/ipx.js'
  }
}

Additional Modifiers

You can use additional modifiers supported by IPX.

Example:

<nuxt-img src="/image.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />

Animated Images

This feature is currently experimental. When using, gif format is converted to webp (check browser support ). Setting size is also not supported yet (check lovell/sharp#2275 and unjs/ipx#35 ).

Example:

<nuxt-img src="/image.gif" :modifiers="{ animated: true }" />
Edit this page on GitHub Updated at Fri, Jan 21, 2022
Providers Imgix Provider
Providers Netlify Provider