Nuxt Image Module: Image Optimization and Lazy Loading in Practice

1. Why images dominate Core Web Vitals

On most websites, image assets make up the largest share of transferred data, which is exactly why consistent image optimization is one of the most effective levers for better load times. Largest Contentful Paint, one of the central Core Web Vitals metrics, is triggered by an image in the vast majority of cases, usually the hero image or a large product photo above the fold. Without image optimization, the browser often loads an image at full resolution even though it only occupies a fraction of the screen area.

The Nuxt Image module solves this problem by controlling image transformations declaratively through components and attributes instead of manually preparing images in different sizes and formats. A developer only specifies the target size and quality, and the module handles the actual conversion, delivering responsive size sets and choosing the right format depending on browser support. This automation drastically reduces manual effort while ensuring consistent image optimization across the entire project.

A concrete example: an online shop with a thousand product images would, without Nuxt Image, need to manually generate several sizes and formats for every image, keep them ready in a build step, and select the right variant in the frontend depending on viewport. With Nuxt Image, a single component handles this entire logic at runtime or at build time, depending on the chosen provider.

2. Installation and provider configuration

Installing Nuxt Image goes through the standard Nuxt module mechanism. After registering it in nuxt.config.ts, a provider needs to be configured that determines where the actual image transformation happens. By default, Nuxt Image uses the built in IPX provider, which performs transformations at runtime inside the Nitro server, without requiring any external infrastructure.

For projects with static deployment or an existing CDN, an external provider such as Cloudinary, Cloudflare Images or a self hosted image server can be configured instead. The provider choice directly affects whether transformations happen at build time, on demand on the first request, or entirely externally at the CDN provider, which in turn can influence the choice between Static Site Generation and server rendering.

# Install Nuxt Image module
npx nuxi module add image

# nuxt.config.ts — default IPX provider, no external infra needed
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'ipx',
    quality: 80,
    format: ['webp', 'avif']
  }
})

3. The NuxtImg component in detail

The <NuxtImg> component replaces the classic <img> tag and automatically handles image optimization based on the given width, height and quality attributes. Unlike the raw HTML tag, no pre converted image file needs to exist; the component requests the right size and format directly from the configured provider. This considerably reduces manual maintenance effort because editors and developers only need to upload a single high quality source image.

For responsive layouts, the sizes attribute automatically generates a complete srcset across multiple breakpoints, letting the browser itself decide which variant to load for the current viewport width. This automatic generation of srcset entries is one of the biggest practical advantages over manual image optimization, where every breakpoint variant would have to be exported and linked by hand.

<template>
  <!-- Automatic responsive srcset across breakpoints -->
  <NuxtImg
    src="/products/sneaker-red.jpg"
    width="800"
    height="600"
    sizes="sm:100vw md:50vw lg:400px"
    quality="80"
    alt="Red sneaker front view"
    loading="lazy"
  />
</template>

4. NuxtPicture for art direction and format choice

While <NuxtImg> is sufficient for most use cases, <NuxtPicture> offers additional control over the native <picture> element, including multiple <source> elements for different formats and even different image crops depending on viewport, known as art direction. For image optimization on a homepage with a different hero image crop for mobile and desktop, <NuxtPicture> is the right tool.

The key difference from <NuxtImg>: <NuxtPicture> automatically generates multiple <source> elements in descending format quality, so the browser picks the most modern format it supports and only falls back to a classic JPEG or PNG as a last resort. This cascade of formats is considerably more robust than a single format decision and works reliably even in older browsers.

<template>
  <!-- Different image crop for mobile vs desktop, modern format cascade -->
  <NuxtPicture
    src="/hero/campaign-summer.jpg"
    :img-attrs="{ class: 'w-full h-auto' }"
    sizes="sm:100vw lg:1200px"
    format="avif,webp"
    alt="Summer campaign hero image"
  />
</template>

5. Controlling lazy loading and load priority

Lazy loading is a central building block of modern image optimization and in Nuxt Image is controlled through the native loading="lazy" attribute, which the browser implements itself without needing any JavaScript. Images outside the visible viewport only get loaded once the user scrolls close enough, which noticeably reduces initial data volume and thus load time.

For the first visible image, usually the hero image or the Largest Contentful Paint element, lazy loading is counterproductive, because the browser then unnecessarily waits for visibility detection before even starting to load it. For this one image, preload should be set instead along with loading="eager", so the browser starts the request immediately with high priority. This deliberate distinction between eagerly and lazily loaded images is one of the most important levers for a low Largest Contentful Paint value.

<template>
  <!-- Hero image: load eagerly with high priority for fast LCP -->
  <NuxtImg
    src="/hero/main-banner.jpg"
    preload
    loading="eager"
    fetchpriority="high"
    width="1600"
    height="800"
    alt="Main banner"
  />

  <!-- Below the fold images: lazy loaded automatically -->
  <NuxtImg
    v-for="product in products"
    :key="product.id"
    :src="product.image"
    loading="lazy"
    width="400"
    height="300"
    :alt="product.name"
  />
</template>

6. Automatic format conversion: WebP and AVIF

Modern image formats like WebP and AVIF achieve considerably smaller file sizes than classic JPEG at the same visual quality, often thirty to fifty percent less data. Nuxt Image automates conversion into these formats through the central format configuration, so developers still only maintain a single source image while delivery automatically happens in the most modern format each browser supports.

When choosing between WebP and AVIF, it matters that AVIF usually achieves a smaller file size for photographic content, but requires a longer encoding time, which for runtime based image optimization with the IPX provider can cause noticeable latency on the first request. For projects with many images and runtime transformation, a caching layer in front of the provider is therefore often worthwhile, so conversion only happens once per image variant instead of being recomputed on every request.

// nuxt.config.ts — format priority and quality per format
export default defineNuxtConfig({
  image: {
    // Try AVIF first, fall back to WebP, then original format
    format: ['avif', 'webp'],
    quality: 80,
    densities: [1, 2]
  }
})

7. IPX and external CDN providers compared

The built in IPX provider of Nuxt Image works excellently for projects with server rendering, where transformations can be performed on demand inside the Nitro server. For purely static Static Site Generation builds with no Node.js runtime in production, however, IPX is unsuitable, since no server logic is available to transform images at runtime.

In that case, an external CDN provider such as Cloudinary or Cloudflare Images handles the actual image optimization, while Nuxt Image merely generates the right URLs with the correct transformation parameters. This separation makes it possible to run static Nuxt 3 projects with full featured image optimization without maintaining a dedicated image server, since the external provider takes care of scaling and caching entirely.

8. Common pitfalls in image optimization

The most common mistake with Nuxt Image is missing width and height attributes. Without these, the browser cannot reserve space for the image before it loads, causing Cumulative Layout Shift, another central Core Web Vitals metric. Even with automatic image optimization, these dimensions must be set explicitly so the page layout stays stable.

A second pitfall is applying lazy loading indiscriminately to every image including the hero image, which measurably worsens Largest Contentful Paint because the browser unnecessarily waits for visibility detection. A third mistake concerns the quality setting: a quality value set too low saves file size but quickly produces visible compression artifacts on product photos, while a value set too high partially negates the benefit of format conversion.

9. Nuxt Image compared to manual optimization

Manual image optimization with external tools like Squoosh or ImageMagick before the build gives full control over every single compression parameter, but scales poorly with frequently changing image material, for example in an online shop with constantly new products. Nuxt Image automates exactly this recurring task and ensures every new image automatically goes through the same optimization pipeline without a developer having to intervene manually.

The trade off lies in control over details: anyone who needs pixel perfect compression settings for every individual image, for example for a high end photography portfolio, may be better served by manual preprocessing. For the vast majority of projects, however, the automation advantage of Nuxt Image clearly outweighs that, especially since quality settings can be adjusted centrally in the Nuxt configuration without touching each image again.

10. Summary

The Nuxt Image module solves the recurring task of image optimization by declaratively controlling format conversion, responsive sizes and lazy loading through components, instead of requiring manual image editing before every deployment. The choice between the IPX provider and an external CDN directly depends on the deployment strategy: server rendering benefits from runtime transformation, while Static Site Generation requires an external provider.

Correctly set width and height attributes prevent layout shifts, while deliberate eager loading for the first visible image noticeably improves the Largest Contentful Paint value. Anyone applying these basic rules consistently gets automated image optimization through Nuxt Image that clearly outperforms manual processes in most projects.

11. FAQ: Nuxt Image Module and Image Optimization