--- title: "<NuxtPicture>" description: "Nuxt provides a <NuxtPicture> component to handle automatic image optimization." links: - label: Source icon: i-simple-icons-github to: https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtPicture.vue size: xs --- `<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag. Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/api/components/nuxt-img) but it 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). ## Setup In order to use `<NuxtPicture>` you should install and enable the Nuxt Image module: ```bash [Terminal] npx nuxi@latest module add image ``` ::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"} Read more about the `<NuxtPicture>` component. ::