Skip to main content
<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.