---
canonical_url: "https://image.nuxt.com"
---
<the-gradient>



</the-gradient>

<u-page-hero orientation="horizontal">
<the-illustration className="hidden,lg:flex">



</the-illustration>

<template v-slot:title="">

Optimized Images for your <span className="text-primary">

Nuxt Apps

</span>
</template>

<template v-slot:description="">

Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

</template>

<template v-slot:links="">
<u-button icon="i-ph-rocket-launch-duotone" size="xl" to="https://image.nuxt.com/get-started/installation">

Get started

</u-button>

<copy-code-input source="npx nuxt module add image">



</copy-code-input>
</template>
</u-page-hero>

<u-container>
<u-page-logos title="Trusted by the best frontend teams">
<template unwrap="p" v-slot:default="">

![OpenAI](https://image.nuxt.com/brands/openai.svg)![Sephora](https://image.nuxt.com/brands/sephora.svg)![Hyundai](https://image.nuxt.com/brands/hyundai.svg)![Gitlab](https://image.nuxt.com/brands/gitlab.svg)![Emma](https://image.nuxt.com/brands/emma.svg)

</template>
</u-page-logos>
</u-container>

<u-page-section>
<template v-slot:title="">

Get the most of your images with <br />

 <span className="text-primary">

dynamic features

</span>
</template>

<template v-slot:features="">
<u-page-card :spotlight="true" icon="i-ph-image-duotone" to="https://image.nuxt.com/usage/nuxt-img">
<template v-slot:title="">

Drop-in Replacement

</template>

<template v-slot:description="">

Leverage `nuxt-img` and `nuxt-picture` drop-in replacement for the native `img` and `picture` elements.

</template>
</u-page-card>

<u-page-card :spotlight="true" icon="i-ph-crop" to="https://image.nuxt.com/providers/ipx">
<template v-slot:title="">

Built-in Resizer

</template>

<template v-slot:description="">

Unlock the power of our built-in image resizer and transformer with IPX.

</template>
</u-page-card>

<u-page-card :spotlight="true" icon="i-ph-plug-duotone" to="https://image.nuxt.com/get-started/providers">
<template v-slot:title="">

20+ Providers Supported

</template>

<template v-slot:description="">

Choose over 20 image providers to optimize your images, no vendor lock-in.

</template>
</u-page-card>

<u-page-card :spotlight="true" icon="i-ph-frame-corners" to="https://image.nuxt.com/usage/nuxt-img#sizes">
<template v-slot:title="">

Responsive Ready

</template>

<template v-slot:description="">

Nuxt Image dynamically generates responsive sizes. Your visuals adapt effortlessly to every screen size, offering a seamless user experience.

</template>
</u-page-card>

<u-page-card :spotlight="true" icon="i-ph-magic-wand-duotone" to="https://image.nuxt.com/usage/nuxt-img#format">
<template v-slot:title="">

Future-Proof Formats

</template>

<template v-slot:description="">

Embrace the future of visual optimization with support for modern formats like webp and avif.

</template>
</u-page-card>

<u-page-card :spotlight="true" icon="i-ph-rocket-launch-duotone" to="https://image.nuxt.com/get-started/installation">
<template v-slot:title="">

Streamlined Performance

</template>

<template v-slot:description="">

Deliver visually stunning content with lightning-fast load times, keeping your audience engaged and delighted.

</template>
</u-page-card>
</template>
</u-page-section>

<u-page-section orientation="horizontal">
<provider-list :providers="["caisy","bunny","builderio","cloudflare","cloudimage","cloudinary","directus","edgeone-pages","fastly","filerobot","glide","gumlet","hygraph","imageengine","imagekit","imgix","imgproxy","ipx","netlify","prepr","prismic","sanity","shopify","storyblok","strapi","twicpics","unsplash","uploadcare","vercel","weserv"]">



</provider-list>

<template v-slot:title="">

Choose your <br />

 <span className="text-primary">

favorite provider

</span>
</template>

<template v-slot:description="">

Nuxt Image supports multiple providers for high performance. Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service. Nuxt Image can also be configured to work with any external image transformation service.

</template>

<template v-slot:links="">
<u-button icon="i-ph-rocket-launch-duotone" size="xl" to="https://image.nuxt.com/get-started/providers">

Get started

</u-button>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://image.nuxt.com/.well-known/api-catalog)
- [Sitemap (XML)](https://image.nuxt.com/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://image.nuxt.com/sitemap.md)
- [MCP server card: MCP endpoint at https://image.nuxt.com/mcp](https://image.nuxt.com/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://image.nuxt.com/mcp)
- [llms.txt: index of the documentation for LLMs](https://image.nuxt.com/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://image.nuxt.com/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://image.nuxt.com/openapi.json)


## Sitemap

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