Add recipe for using getImage() and creating custom component

src/content/docs/en/guides/images.mdx

@@ -467,6 +467,8 @@ import stars from "~/stars/docline.png";
 
 The `getImage()` function is intended for generating images destined to be used somewhere else than directly in HTML, for example in an [API Route](/en/core-concepts/endpoints/#server-endpoints-api-routes). It also allows you to create your own custom `<Image />` component.
 
+You can find an example on how to create your own custom image component in this [recipe](/en/recipes/getimage/).
+
 `getImage()` takes an options object with the [same properties as the Image component](#properties) (except `alt`).
 
 ```astro

src/content/docs/en/recipes/getImage.mdx

@@ -0,0 +1,105 @@
+---
+title: Build a custom Picture Component 
+description: Learn how to build a custom Picture Component using the getImage function
+i18nReady: true
+type: recipe
+---
+
+The `getImage()` function is used for generating images that will be used elsewhere instead of directly in the HTML. In this recipe, you will learn how to create your own `<Picture>` component using the `getImage()` function.
+
+
+## Prerequisites
+- A project with [SSR](/en/guides/server-side-rendering/) (`output: 'server'`) enabled
+
+
+## Recipe
+
+1. Create a new Astro component and import the `getImage()` function
+
+    ```astro title="src/components/MyCustomPictureComponent.astro"
+    ---
+     import { getImage } from "astro:assets";
+    ---
+
+    ```
+
+2. Destructure the `props` from `Astro.props`. You can also use TypeScript to type the props. 
+
+   ```astro title="src/components/MyCustomPictureComponent.astro"
+    ---
+    interface Props {
+        mobileImgUrl: string | ImageMetadata;
+        desktopImgUrl: string | ImageMetadata;
+        alt: string;
+    }
+
+    import type { ImageMetadata } from "astro";
+    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+    import { getImage } from "astro:assets";
+    ---
+
+    ```
+
+3. Call the `getImage()` function and pass in the properties you want to use into the options object 
+
+    ```astro title="src/components/MyCustomPictureComponent.astro"
+    ---
+    interface Props {
+        mobileImgUrl: string | ImageMetadata;
+        desktopImgUrl: string | ImageMetadata;
+        alt: string;
+    }
+
+    import type { ImageMetadata } from "astro";
+    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+    import { getImage } from "astro:assets";
+
+    const mobileImg = await getImage({
+        src: mobileImgUrl,
+        format: "webp",
+        width: 200,
+    });
+
+    const desktopImg = await getImage({
+        src: desktopImgUrl,
+        format: "webp",
+        width: 800,
+    });
+    ---
+
+    ```
+
+4. Add the `source` and `img` elements inside the `picture` element 
+
+   ```astro title="src/components/MyCustomPictureComponent.astro"
+    ---
+    interface Props {
+        mobileImgUrl: string | ImageMetadata;
+        desktopImgUrl: string | ImageMetadata;
+        alt: string;
+    }
+
+    import type { ImageMetadata } from "astro";
+    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+    import { getImage } from "astro:assets";
+
+    const mobileImg = await getImage({
+        src: mobileImgUrl,
+        format: "webp",
+        width: 200,
+    });
+
+    const desktopImg = await getImage({
+        src: desktopImgUrl,
+        format: "webp",
+        width: 800,
+    });
+    ---
+
+    <picture>
+        <source media="(max-width: 799px)" srcset={mobileImg.src} />
+        <source media="(min-width: 800px)" srcset={desktopImg.src} />
+        <img src={desktopImg.src} alt={alt} />
+    </picture>
+
+    ```