Merge branch 'main' into i18n/fr-create-astro-i18n.mdx

src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx

@@ -320,7 +320,7 @@ See more about [Styling in Astro](/en/guides/styling/).
 
 ### Gatsby Image Plugin to Astro
 
-Convert Gatsby's `<StaticImage />` and `<GatsbyImage />` components to [Astro's own image integration components](/en/guides/images/#image--astroassets), or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
+Convert Gatsby's `<StaticImage />` and `<GatsbyImage />` components to [Astro's own image integration components](/en/guides/images/), or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
 
 ```astro title="src/pages/index.astro"
 ---
@@ -331,7 +331,7 @@ import rocket from '../assets/rocket.png';
 <img src={rocket.src} alt="A rocketship in space.">
 ```
 
-Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Gatsby's attributes.
+Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Gatsby's attributes.
 
 To continue using [images in Markdown (`.md`) files](/en/guides/images/#images-in-markdown-files) using standard Markdown syntax (`![]()`), you may need to update the link. Using the HTML `<img>` tag directly is not supported in `.md` files for local images, and must be converted to Markdown syntax.
 

src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx

@@ -422,9 +422,9 @@ See more about [Styling in Astro](/en/guides/styling/).
 
 ### Next Image Plugin to Astro
 
-Convert any Next `<Image />` components to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components. 
+Convert any Next `<Image />` components to [Astro's own image component](/en/guides/images/) in `.astro` or `.mdx` files, or to a [standard HTML `<img>` / JSX `<img />`](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components. 
 
-Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Next's attributes. 
+Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Next's attributes. 
 
 ```astro title="src/pages/index.astro"
 ---

src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx

@@ -487,9 +487,9 @@ See more about [Styling in Astro](/en/guides/styling/).
 
 ### Nuxt Image Plugin to Astro
 
-Convert any [Nuxt `<nuxt-img/>` or `<nuxt-picture/>` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML `<img>`](/en/guides/images/#images-in-ui-framework-components) or `<picture>` tag as appropriate in your Vue components.
+Convert any [Nuxt `<nuxt-img/>` or `<nuxt-picture/>` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image component](/en/guides/images/) in `.astro` or `.mdx` files, or to a [standard HTML `<img>`](/en/guides/images/#images-in-ui-framework-components) or `<picture>` tag as appropriate in your Vue components.
 
-Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Nuxt's attributes. 
+Astro's `<Image />` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/reference/modules/astro-assets/#image-properties) and note that several will differ from Nuxt's attributes. 
 
 ```astro title="src/pages/index.astro"
 ---

src/content/docs/en/guides/upgrade-to/v3.mdx

@@ -827,7 +827,7 @@ If you were using the image integration in Astro v2.x, complete the following st
 
     Change all `import` statements from `@astrojs/image/components` to `astro:assets` in order to use the new built-in `<Image />` component.
 
-    Remove any component attributes that are not [currently supported image asset properties](/en/guides/images/#properties).
+    Remove any component attributes that are not [currently supported image asset properties](/en/reference/modules/astro-assets/#image-properties).
 
     For example, `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes.
 

src/content/docs/en/reference/components-reference.mdx

@@ -115,136 +115,7 @@ import { Prism } from '@astrojs/prism';
 
 This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content/#prism-configuration) for more details.
 
-See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`!
-
-## `<Image />`
-
-```astro title="src/components/MyComponent.astro"
----
-// import the Image component and the image
-import { Image } from 'astro:assets';
-import myImage from "../assets/my_image.png"; // Image is 1600x900
----
-
-<!-- `alt` is mandatory on the Image component -->
-<Image src={myImage} alt="A description of my image." />
-```
-
-```html
-<!-- Output -->
-<!-- Image is optimized, proper attributes are enforced -->
-<img
-  src="/_astro/my_image.hash.webp"
-  width="1600"
-  height="900"
-  decoding="async"
-  loading="lazy"
-  alt="A description of my image."
-/>
-```
-### Properties
-
-- src (required)
-- alt (required)
-- width and height (required for `public/` and remote images)
-- format
-- quality
-- densities
-- widths
-
-In addition to the properties above, the `<Image />` component accepts all properties accepted by the HTML `<img>` tag.
-
-See more in the [Images Guide](/en/guides/images/#image--astroassets).
-
-## `<Picture />`
-
-<p><Since v="3.3.0" /></p>
-
-Use the built-in `<Picture />` Astro component to display a responsive image with multiple formats and/or sizes.
-
-```astro title="src/pages/index.astro"
----
-import { Picture } from 'astro:assets';
-import myImage from "../assets/my_image.png"; // Image is 1600x900
----
-
-<!-- `alt` is mandatory on the Picture component -->
-<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />
-```
-
-```html
-<!-- Output -->
-<picture>
-  <source srcset="/_astro/my_image.hash.avif" type="image/avif" />
-  <source srcset="/_astro/my_image.hash.webp" type="image/webp" />
-  <img
-    src="/_astro/my_image.hash.png"
-    width="1600"
-    height="900"
-    decoding="async"
-    loading="lazy"
-    alt="A description of my image."
-  />
-</picture>
-```
-
-See more in the [Images Guide](/en/guides/images/#picture-).
-
-### Properties
-
-`<Picture />` accepts all the properties of the `<Image />` component, plus the following:
-
-#### `formats`
-
-An array of image formats to use for the `<source>` tags. By default, this is set to `['webp']`.
-
-#### `fallbackFormat`
-
-Format to use as a fallback value for the `<img>` tag. Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files.
-
-#### `pictureAttributes`
-
-An object of attributes to be added to the `<picture>` tag. Use this property to apply attributes to the outer `<picture>` element itself. Attributes applied to the `<Picture />` component directly will apply to the inner `<img>` element, except for those used for image transformation.
-
-
-## `<Content />`
-
-A generic component used to render the content of a [content collection entry](/en/guides/content-collections/#what-are-content-collections).
-
-First, query one or more entries using `getCollection()` or `getEntry()`. Then, the `entry.render()` function can return the `<Content />` component for use in a `.astro` file template.
-
-```astro title="src/pages/render-example.astro" {4, 7}
----
-import { getEntry } from 'astro:content';
-const entry = await getEntry('blog', 'post-1');
-const { Content } = await entry.render();
----
-<p>Published on: {entry.data.published.toDateString()}</p>
-<Content />
-```
-
-## `<ViewTransitions />`
-
-<p><Since v="2.9.0" /></p>
-
-Opt in to using view transitions on individual pages by importing and adding the `<ViewTransitions />` routing component to `<head>` on every desired page.
-
-```astro title="src/pages/index.astro" ins={2,7}
----
-import { ViewTransitions } from 'astro:transitions';
----
-<html lang="en">
-  <head>
-    <title>My Homepage</title>
-    <ViewTransitions />
-  </head>
-  <body>
-    <h1>Welcome to my website!</h1>
-  </body>
-</html>
-```
-
-See more about how to [control the router](/en/guides/view-transitions/#router-control) and [add transition directives](/en/guides/view-transitions/#transition-directives) to page elements and components.
+See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`.
 
 ## `<Debug />`
 

src/content/docs/en/reference/errors/image-missing-alt.mdx

@@ -22,7 +22,7 @@ If the image is merely decorative (i.e. doesn’t contribute to the understandin
 
 **See Also:**
 -  [Images](/en/guides/images/)
--  [Image component](/en/guides/images/#image--astroassets)
--  [Image component#alt](/en/guides/images/#alt-required)
+-  [Image component](/en/reference/modules/astro-assets/#image-)
+-  [Image component#alt](/en/reference/modules/astro-assets/#alt-required)
 
 

src/content/docs/en/reference/errors/missing-image-dimension.mdx

@@ -16,12 +16,12 @@ import DontEditWarning from '~/components/DontEditWarning.astro'
 > Missing width and height attributes for `IMAGE_URL`. When using remote images, both dimensions are required in order to avoid cumulative layout shift (CLS).
 
 ## What went wrong?
-For remote images, `width` and `height` cannot automatically be inferred from the original file. To avoid cumulative layout shift (CLS), either specify these two properties, or set [`inferSize`](/en/guides/images/#infersize) to `true` to fetch a remote image's original dimensions.
+For remote images, `width` and `height` cannot automatically be inferred from the original file. To avoid cumulative layout shift (CLS), either specify these two properties, or set [`inferSize`](/en/reference/modules/astro-assets/#infersize) to `true` to fetch a remote image's original dimensions.
 
 If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](/en/guides/imports/#other-assets).
 
 **See Also:**
 -  [Images](/en/guides/images/)
--  [Image component#width-and-height-required](/en/guides/images/#width-and-height-required-for-images-in-public)
+-  [Image component#width-and-height-required](/en/reference/modules/astro-assets/#width-and-height-required-for-images-in-public)
 
 

src/content/docs/en/reference/errors/missing-sharp.mdx

@@ -31,7 +31,6 @@ export default defineConfig({
 
 **See Also:**
 -  [Default Image Service](/en/guides/images/#default-image-service)
--  [Image Component](/en/guides/images/#image--astroassets)
 -  [Image Services API](/en/reference/image-service-reference/)