@nuxt/image — Responsive, Optimized Images

@nuxt/image auto-generates responsive sources, modern formats (AVIF/WebP), and CDN-served variants with a single component.

4 min read Level 2/5 #nuxt#image#performance

What you'll learn

Install the @nuxt/image module
Use NuxtImg and NuxtPicture in templates
Configure a provider such as ipx, cloudinary, or vercel

Images are often the largest assets on a page. @nuxt/image makes it trivial to serve the right format, size, and density for every device.

Install

npx nuxi module add @nuxt/image

Use `<NuxtImg>`

<template>
  <NuxtImg
    src="/hero.jpg"
    alt="Mountain at sunrise"
    width="1200"
    height="600"
    sizes="sm:100vw md:50vw lg:600px"
  />
</template>

The sizes prop generates a responsive srcset so the browser picks the smallest acceptable image for its viewport.

`<NuxtPicture>` for Format Switching

<NuxtPicture> renders a <picture> element with AVIF / WebP sources and a JPEG fallback:

<template>
  <NuxtPicture src="/hero.jpg" sizes="sm:100vw md:50vw" />
</template>

Providers

Out of the box the module uses ipx, a built-in image transformer. For production, point it at a CDN provider:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/your-account/image/upload/',
    },
  },
})

Built-in providers include ipx, cloudinary, vercel, netlify, imgix, twicpics, and more.

Presets

Define reusable transformations for repeated cases:

image: {
  presets: {
    avatar: { modifiers: { format: 'webp', width: 80, height: 80 } },
  },
}

Then use <NuxtImg preset="avatar" src="/me.jpg" />.

@nuxt/content — File-Based CMS →