--- title: "<NuxtImg>" description: "Nuxt provides a <NuxtImg> 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/NuxtImg.vue size: xs --- `<NuxtImg>` is a drop-in replacement for the native `<img>` tag. - Uses built-in provider to optimize local and remote images - Converts `src` to provider-optimized URLs - Automatically resizes images based on `width` and `height` - Generates responsive sizes when providing `sizes` option - Supports native lazy loading as well as other `<img>` attributes ## Setup In order to use `<NuxtImg>` you should install and enable the Nuxt Image module: ```bash [Terminal] npx nuxi@latest module add image ``` ## Usage `<NuxtImg>` outputs a native `img` tag directly (without any wrapper around it). Use it like you would use the `<img>` tag: ```html <NuxtImg src="/nuxt-icon.png" /> ``` Will result in: ```html <img src="/nuxt-icon.png" /> ``` ::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"} Read more about the `<NuxtImg>` component. ::