Providers

Netlify

Optimize images with Netlify's dynamic image transformation service.

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:

nuxt.config.ts
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 in your netlify.toml file.

netlify.toml
[images]
  remote_images = ["https://my-images.com/.*", "https://animals.more-images.com/[bcr]at/.*"]

The remote_images property accepts an array of regex. If your images are in specific subdomains or directories, you can use regex to allow just those subdomains or directories.

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

Netlify’s Large Media service is deprecated. If this feature is already enabled for your site on Netlify and you have already set provider: 'netlify' in your Nuxt configuration, then this will be detected at build time and Large Media continues to work on your site as usual. You can also explicitly enable it by setting provider: 'netlifyLargeMedia'. However, new Large Media configuration is not recommended.

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)