responsive images stable

astro.sidebar.ts

@@ -136,7 +136,6 @@ export const sidebar = [
 			group('reference.experimental', {
 				items: [
 					'reference/experimental-flags',
-					'reference/experimental-flags/responsive-images',
 					'reference/experimental-flags/fonts',
 					'reference/experimental-flags/client-prerender',
 					'reference/experimental-flags/content-intellisense',

public/_redirects

@@ -38,6 +38,8 @@
 /:lang/reference/experimental-flags/sessions/				 /:lang/guides/sessions/
 /:lang/reference/experimental-flags/svg/				     /:lang/guides/images/
 /:lang/reference/experimental-flags/serialized-configuration/				 /:lang/reference/modules/astro-config/
+/:lang/reference/experimental-flags/responsive-images/				     /:lang/guides/images/
+
 
 # Very old docs site redirects
 # Once upon a time these URLs existed, so we try to keep them meaning something.

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

@@ -1133,53 +1133,80 @@ You can use wildcards to define the permitted `hostname` and `pathname` values a
   - End with '/**' to allow all sub-routes ('startsWith').
   - End with '/*' to allow only one level of sub-route.
 
-### image.experimentalLayout
+### image.responsiveStyles
+
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`
+<Since v="5.10.0" />
+</p>
+
+Whether to automatically add global styles for responsive images. You should enable this option unless you are styling the images yourself.
+
+This option is only used when `layout` is set to `constrained`, `full-width`, or `fixed` using the configuration or the `layout` prop on the image component.
+
+See [the Images guide](/en/guides/images/#responsive-image-styles) for more information.
+
+
+### image.layout
 
 <p>
 
 **Type:** `ImageLayout`<br />
 **Default:** `undefined`
+<Since v="5.10.0" />
 </p>
 
-The default layout type for responsive images. Can be overridden by the `layout` prop on the image component.
-Requires the `experimental.responsiveImages` flag to be enabled.
+The default `layout` type for responsive images. Can be overridden by the `layout` prop on an individual image component.
+
 - `constrained` - The image will scale to fit the container, maintaining its aspect ratio, but will not exceed the specified dimensions.
 - `fixed` - The image will maintain its original dimensions.
 - `full-width` - The image will scale to fit the container, maintaining its aspect ratio.
 
-### image.experimentalObjectFit
+See [the `layout` component property](/en/reference/modules/astro-assets/#layout) for more details.
+
+### image.objectFit
 
 <p>
 
 **Type:** `ImageFit`<br />
 **Default:** `"cover"`
+<Since v="5.10.0" />
 </p>
 
-The default object-fit value for responsive images. Can be overridden by the `fit` prop on the image component.
-Requires the `experimental.responsiveImages` flag to be enabled.
+The default [`object-fit` CSS property value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for responsive images. Can be overridden by the `fit` prop on an individual image component.
+
+See [the `fit` component property](/en/reference/modules/astro-assets/#fit) for more details.
 
-### image.experimentalObjectPosition
+
+### image.objectPosition
 
 <p>
 
 **Type:** `string`<br />
 **Default:** `"center"`
+<Since v="5.10.0" />
 </p>
 
-The default object-position value for responsive images. Can be overridden by the `position` prop on the image component.
-Requires the `experimental.responsiveImages` flag to be enabled.
+The default [`object-position` CSS property value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) for responsive images. Can be overridden by the `position` prop on an individual image component.
+
+See [the `position` component property](/en/reference/modules/astro-assets/#position) for more details.
 
-### image.experimentalBreakpoints
+### image.breakpoints
 
 <p>
 
 **Type:** `Array<number>`<br />
 **Default:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]`
+<Since v="5.10.0" />
 </p>
 
-The breakpoints used to generate responsive images. Requires the `experimental.responsiveImages` flag to be enabled. The full list is not normally used,
-but is filtered according to the source and output size. The defaults used depend on whether a local or remote image service is used. For remote services
-the more comprehensive list is used, because only the required sizes are generated. For local services, the list is shorter to reduce the number of images generated.
+The breakpoints used to generate responsive images. 
+
+The full list of breakpoints is not normally used but instead is filtered according to the source and output size. The defaults used depend on whether a local or remote image service is used.
+
+For remote services, more breakpoints are included because only the required sizes will actually be generated. For local services, the list of breakpoints is shorter to reduce the number of images generated.
 
 ### image.experimentalDefaultStyles