---
title: "<NuxtPicture>"
description: "Discover how to use and configure the Nuxt Picture component."
canonical_url: "https://nuxt.com/modules/image/usage/nuxt-picture"
---
# \<NuxtPicture>

> Discover how to use and configure the Nuxt Picture component.

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

Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](nuxt-img) but also allows serving modern formats like `webp` when possible.

Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).

::warning
Unlike the native [`<picture>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), `<NuxtPicture>` currently doesn't support using multiple image sources. See [#309](https://github.com/nuxt/image/issues/309) for more info.
::

## Props

::tip
See props supported by [`<NuxtImg>`](https://nuxt.com/modules/image/usage/nuxt-img#props)
::

### `format`

Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.

```vue
<NuxtPicture
  format="avif,webp"
  src="/nuxt-icon.png"
/>
```

Available formats are `webp`, `avif`, `jpeg`, `jpg`, `png`, and `gif`. If the format is not specified, it will respect the default image format.

### `legacyFormat`

Format used for fallback. Default is conditional:

- If original format supports transparency (`png`, `webp`, and `gif`), `png` is used for fallback
- Otherwise `jpeg` is used for fallback

### `imgAttrs`

Allows you to set additional HTML-attributes on the `img` element.

**Example:**

```vue
<NuxtPicture
  src="/nuxt-icon.png"
  :imgAttrs="{
    id: 'my-id',
    class: 'my-class',
    style: 'display: block',
    'data-my-data': 'my-value'
  }"
/>
```

---

- [Source](https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtPicture.vue)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.