docs: add info about <NuxtImg> and <NuxtPicture> (#23741)

docs/3.api/2.components/10.nuxt-picture.md

@@ -0,0 +1,22 @@
+---
+title: "<NuxtPicture>"
+description: "Nuxt provides a <NuxtPicture> component to handle automatic image optimization."
+---
+
+`<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
+
+Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](./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"}
+Read more about the `<NuxtPicture>` component.
+::

docs/3.api/2.components/9.nuxt-img.md

@@ -0,0 +1,38 @@
+---
+title: "<NuxtImg>"
+description: "Nuxt provides a <NuxtImg> component to handle automatic image optimization."
+---
+
+`<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"}
+Read more about the `<NuxtImg>` component.
+::