Netlify

When deploying your Nuxt applications to Netlify's composable platform, the image module uses Netlify Image CDN to optimize and transform images on demand without impacting build times. Netlify Image CDN also handles content negotiation to use the most efficient image format for the requesting client.

This provider is automatically enabled in Netlify deployments, and also when running locally using the Netlify CLI.

You can also manually enable this provider. To do so, set the provider to netlify or add the following to your Nuxt configuration:

export default defineNuxtConfig({
  image: {
    provider: 'netlify',
  }
})

Local development

To test image transformations locally, use Netlify Dev. This feature of the Netlify CLI runs a local development server that mimics the Netlify production environment, including Netlify Image CDN.

Remote images

To transform a source image hosted on another domain, you must first configure allowed domains:

export default defineNuxtConfig({
  image: {
    provider: 'netlify',
    domains: ['images.example.com']
  }
})

Modifiers

Beyond the standard properties, you can use the Netlify Image CDN position parameter as a modifier for Nuxt Image.

<NuxtImg
  provider="netlify"
  src="owl.jpg"
  height="400"
  width="600"
  fit="cover"
  format="webp"
  quality="80"
  :modifiers="{ position: 'left' }"
/>

Deprecated Netlify Large Media option

Migrate to Netlify Image CDN

To migrate from the deprecated Netlify Large Media option to the more robust Netlify Image CDN option, change provider: 'netlify' to provider: 'netlifyImageCdn'. This will enable the Netlify Image CDN service, even if large media is enabled on your site.

Use deprecated Netlify Large Media option

If you're not ready to migrate to the more robust Netlify Image CDN option, Netlify continues to support dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with Netlify Large Media.

Large Media Modifiers

In addition to height and width, the deprecated Netlify Large Media provider supports the following modifiers:

fit

• Default: contain
• Valid options: contain (equivalent to nf_resize=fit) and fill (equivalent to nf_resize=smartcrop)