<NuxtPicture>

Nuxt provides a <NuxtPicture> component to handle automatic image optimization.

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but it also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Setup

In order to use <NuxtPicture> you should install and enable the Nuxt Image module:

npx nuxt module add image

Usage

<NuxtPicture> outputs a native <picture> tag with multiple <source> elements for different formats and a fallback <img> tag:

<NuxtPicture src="/nuxt-icon.png" />

Will generate optimized variants in modern formats:

<picture>
  <source type="image/webp" srcset="..." />
  <source type="image/avif" srcset="..." />
  <img src="/nuxt-icon.png" />
</picture>

Props

<NuxtPicture> accepts all native <picture> and <img> attributes plus additional props for image optimization:

src · string · required

The source URL of the image.

width · number

The width of the image in pixels. Used for image optimization.

height · number

The height of the image in pixels. Used for image optimization.

sizes · string

Responsive sizes for different viewport widths. Example: "sm:100vw md:50vw lg:400px"

alt · string

Alternative text for the image. Important for accessibility.

format · string

Comma-separated list of formats to generate (e.g., "webp,avif,png").

quality · number

The quality of the optimized image (0-100).

loading · 'lazy' | 'eager'

Native lazy loading attribute.

provider · string

The image provider to use (e.g., "cloudinary", "imgix", "ipx").

preset · string

A predefined set of image modifiers.

imgAttrs · object

Additional attributes to apply to the <img> element.

Learn More

NuxtPicture Documentation

Read the complete documentation for <NuxtPicture> component in the Nuxt Image module docs.