Nuxt Image comes with a preconfigured instance of unjs/ipx - an open source, self-hosted image optimizer based on lovell/sharp.
You can use additional modifiers supported by IPX.
Example:
<NuxtImg
src="/image.png"
:modifiers="{ grayscale: true, tint: '#00DC82' }"
/>
You can update the options for ipx at runtime by passing the appropriate environment variable. For example:
export default defineNuxtConfig({
runtimeConfig: {
ipx: {
baseURL: process.env.NUXT_IPX_BASE_URL || '/_ipx',
alias: {
someAlias: process.env.NUXT_IPX_ALIAS_SOME_ALIAS || ''
},
http: {
domains: process.env.NUXT_IPX_HTTP_DOMAINS,
},
},
},
})