5 files changed, 46 insertions, 50 deletions
diff --git a/.changeset/clever-rice-compete.md b/.changeset/clever-rice-compete.md
new file mode 100644
index 000000000..59897964d
--- /dev/null
+++ b/.changeset/clever-rice-compete.md
@@ -0,0 +1,23 @@
+---
+'astro': patch
+---
+
+Adds experimental responsive image support in Markdown
+
+Previously, the `experimental.responsiveImages` feature could only provide responsive images when using the `<Image />` and `<Picture />` components.
+
+Now, images written with the `![]()` Markdown syntax in Markdown and MDX files will generate responsive images by default when using this experimental feature.
+
+To try this experimental feature, set `experimental.responsiveImages` to true in your `astro.config.mjs` file:
+
+```js
+{
+   experimental: {
+      responsiveImages: true,
+   },
+}
+```
+
+Learn more about using this feature in the [experimental responsive images feature reference](https://docs.astro.build/en/reference/experimental-flags/responsive-images/).
+
+For a complete overview, and to give feedback on this experimental API, see the [Responsive Images RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md).
+\ No newline at end of file
diff --git a/packages/astro/components/Image.astro b/packages/astro/components/Image.astro
index a74c40332..709e4fe68 100644
--- a/packages/astro/components/Image.astro
+++ b/packages/astro/components/Image.astro
@@ -1,7 +1,6 @@
 ---
 import { type LocalImageProps, type RemoteImageProps, getImage, imageConfig } from 'astro:assets';
 import type { UnresolvedImageTransform } from '../dist/assets/types';
-import { applyResponsiveAttributes } from '../dist/assets/utils/imageAttributes.js';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
 
@@ -46,14 +45,7 @@ if (import.meta.env.DEV) {
 	additionalAttributes['data-image-component'] = 'true';
 }
 
-const { class: className, ...attributes } = useResponsive
-	? applyResponsiveAttributes({
-			layout,
-			image,
-			props,
-			additionalAttributes,
-		})
-	: { ...additionalAttributes, ...image.attributes };
+const { class: className, ...attributes } = { ...additionalAttributes, ...image.attributes };
 ---
 
 {/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}
diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro
index 139681b51..08d7e1cd3 100644
--- a/packages/astro/components/Picture.astro
+++ b/packages/astro/components/Picture.astro
@@ -1,8 +1,7 @@
 ---
 import { type LocalImageProps, type RemoteImageProps, getImage, imageConfig } from 'astro:assets';
 import * as mime from 'mrmime';
-import { applyResponsiveAttributes } from '../dist/assets/utils/imageAttributes';
-import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
+import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind.js';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type {
 	GetImageResult,
@@ -101,18 +100,14 @@ if (fallbackImage.srcSet.values.length > 0) {
 	imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
 }
 
-const { class: className, ...attributes } = useResponsive
-	? applyResponsiveAttributes({
-			layout,
-			image: fallbackImage,
-			props,
-			additionalAttributes: imgAdditionalAttributes,
-		})
-	: { ...imgAdditionalAttributes, ...fallbackImage.attributes };
-
 if (import.meta.env.DEV) {
 	imgAdditionalAttributes['data-image-component'] = 'true';
 }
+
+const { class: className, ...attributes } = {
+	...imgAdditionalAttributes,
+	...fallbackImage.attributes,
+};
 ---
 
 <picture {...pictureAttributes}>
diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts
index d9c2db5a0..edaa9dbab 100644
--- a/packages/astro/src/assets/internal.ts
+++ b/packages/astro/src/assets/internal.ts
@@ -18,6 +18,7 @@ import {
 } from './types.js';
 import { isESMImportedImage, isRemoteImage, resolveSrc } from './utils/imageKind.js';
 import { inferRemoteSize } from './utils/remoteProbe.js';
+import { addCSSVarsToStyle, cssFitValues } from './utils/imageAttributes.js';
 
 export async function getConfiguredImageService(): Promise<ImageService> {
 	if (!globalThis?.astroAsset?.imageService) {
@@ -151,6 +152,19 @@ export async function getImage(
 		}
 		delete resolvedOptions.priority;
 		delete resolvedOptions.densities;
+
+		if (layout !== 'none') {
+			resolvedOptions.style = addCSSVarsToStyle(
+				{
+					w: String(resolvedOptions.width),
+					h: String(resolvedOptions.height),
+					fit: cssFitValues.includes(resolvedOptions.fit ?? '') && resolvedOptions.fit,
+					pos: resolvedOptions.position,
+				},
+				resolvedOptions.style,
+			);
+			resolvedOptions['data-astro-image'] = layout;
+		}
 	}
 
 	const validatedOptions = service.validateOptions
diff --git a/packages/astro/src/assets/utils/imageAttributes.ts b/packages/astro/src/assets/utils/imageAttributes.ts
index aa67b528f..e7d1b6949 100644
--- a/packages/astro/src/assets/utils/imageAttributes.ts
+++ b/packages/astro/src/assets/utils/imageAttributes.ts
@@ -1,5 +1,6 @@
 import { toStyleString } from '../../runtime/server/render/util.js';
-import type { GetImageResult, ImageLayout, LocalImageProps, RemoteImageProps } from '../types.js';
+
+export const cssFitValues = ['fill', 'contain', 'cover', 'scale-down'];
 
 export function addCSSVarsToStyle(
 	vars: Record<string, string | false | undefined>,
@@ -17,32 +18,3 @@ export function addCSSVarsToStyle(
 
 	return `${cssVars} ${style}`;
 }
-
-const cssFitValues = ['fill', 'contain', 'cover', 'scale-down'];
-
-export function applyResponsiveAttributes<
-	T extends LocalImageProps<unknown> | RemoteImageProps<unknown>,
->({
-	layout,
-	image,
-	props,
-	additionalAttributes,
-}: {
-	layout: Exclude<ImageLayout, 'none'>;
-	image: GetImageResult;
-	additionalAttributes: Record<string, any>;
-	props: T;
-}) {
-	const attributes = { ...additionalAttributes, ...image.attributes };
-	attributes.style = addCSSVarsToStyle(
-		{
-			w: image.attributes.width ?? props.width ?? image.options.width,
-			h: image.attributes.height ?? props.height ?? image.options.height,
-			fit: cssFitValues.includes(props.fit ?? '') && props.fit,
-			pos: props.position,
-		},
-		attributes.style,
-	);
-	attributes['data-astro-image'] = layout;
-	return attributes;
-}