Fix using optimized images in Markdown (#6604)

* fix(images): Fix using optimized images in Markdown

* test(images): Update tests to be a bit more robust + new tests

* chore: changeset

* refactor: use spreadAttributes instead

4 files changed, 7 insertions, 65 deletions

diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
index ffae6be4f..f37b9ed68 100644
--- a/packages/markdown/remark/src/index.ts
+++ b/packages/markdown/remark/src/index.ts
@@ -96,7 +96,7 @@ export async function renderMarkdown(
 
 		if (opts.experimentalAssets) {
 			// Apply later in case user plugins resolve relative image paths
-			parser.use([toRemarkCollectImages(opts.resolveImage)]);
+			parser.use([toRemarkCollectImages()]);
 		}
 	}
 
@@ -116,7 +116,7 @@ export async function renderMarkdown(
 	});
 
 	if (opts.experimentalAssets) {
-		parser.use(rehypeImages(await opts.imageService, opts.assetsDir, opts.getImageMetadata));
+		parser.use(rehypeImages());
 	}
 	if (!isPerformanceBenchmark) {
 		parser.use([rehypeHeadingIds]);
diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts
index 1d615c8b5..72f475700 100644
--- a/packages/markdown/remark/src/rehype-images.ts
+++ b/packages/markdown/remark/src/rehype-images.ts
@@ -1,14 +1,10 @@
-import { join as pathJoin } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { visit } from 'unist-util-visit';
-import { pathToFileURL } from 'url';
-import type { ImageMetadata, MarkdownVFile } from './types.js';
+import type { MarkdownVFile } from './types.js';
 
-export function rehypeImages(imageService: any, assetsDir: URL | undefined, getImageMetadata: any) {
+export function rehypeImages() {
 	return () =>
 		function (tree: any, file: MarkdownVFile) {
 			visit(tree, (node) => {
-				if (!assetsDir) return;
 				if (node.type !== 'element') return;
 				if (node.tagName !== 'img') return;
 
@@ -16,39 +12,8 @@ export function rehypeImages(imageService: any, assetsDir: URL | undefined, getI
 					if (file.dirname) {
 						if (!isRelativePath(node.properties.src) && !isAliasedPath(node.properties.src)) return;
 
-						let fileURL: URL;
-						if (isAliasedPath(node.properties.src)) {
-							fileURL = new URL(stripAliasPath(node.properties.src), assetsDir);
-						} else {
-							fileURL = pathToFileURL(pathJoin(file.dirname, node.properties.src));
-						}
-
-						const fileData = getImageMetadata!(fileURLToPath(fileURL)) as ImageMetadata;
-						fileURL.searchParams.append('origWidth', fileData.width.toString());
-						fileURL.searchParams.append('origHeight', fileData.height.toString());
-						fileURL.searchParams.append('origFormat', fileData.type.toString());
-
-						let options = {
-							src: {
-								src: fileURL,
-								width: fileData.width,
-								height: fileData.height,
-								format: fileData.type,
-							},
-							alt: node.properties.alt,
-						};
-
-						const validatedOptions = imageService.validateOptions
-							? imageService.validateOptions(options)
-							: options;
-
-						const imageURL = imageService.getURL(validatedOptions);
-						node.properties = Object.assign(node.properties, {
-							src: imageURL,
-							...(imageService.getHTMLAttributes !== undefined
-								? imageService.getHTMLAttributes(validatedOptions)
-								: {}),
-						});
+						node.properties['__ASTRO_IMAGE_'] = node.properties.src;
+						delete node.properties.src;
 					}
 				}
 			});
@@ -59,10 +24,6 @@ function isAliasedPath(path: string) {
 	return path.startsWith('~/assets');
 }
 
-function stripAliasPath(path: string) {
-	return path.replace('~/assets/', '');
-}
-
 function isRelativePath(path: string) {
 	return startsWithDotDotSlash(path) || startsWithDotSlash(path);
 }
diff --git a/packages/markdown/remark/src/remark-collect-images.ts b/packages/markdown/remark/src/remark-collect-images.ts
index bb6a6ddb0..afc61c468 100644
--- a/packages/markdown/remark/src/remark-collect-images.ts
+++ b/packages/markdown/remark/src/remark-collect-images.ts
@@ -2,9 +2,7 @@ import type { Image } from 'mdast';
 import { visit } from 'unist-util-visit';
 import type { VFile } from 'vfile';
 
-type OptionalResolveImage = ((path: string) => Promise<string>) | undefined;
-
-export default function toRemarkCollectImages(resolveImage: OptionalResolveImage) {
+export default function toRemarkCollectImages() {
 	return () =>
 		async function (tree: any, vfile: VFile) {
 			if (typeof vfile?.path !== 'string') return;
@@ -13,19 +11,6 @@ export default function toRemarkCollectImages(resolveImage: OptionalResolveImage
 			visit(tree, 'image', function raiseError(node: Image) {
 				imagePaths.add(node.url);
 			});
-			if (imagePaths.size === 0) {
-				vfile.data.imagePaths = [];
-				return;
-			} else if (resolveImage) {
-				const mapping = new Map<string, string>();
-				for (const path of Array.from(imagePaths)) {
-					const id = await resolveImage(path);
-					mapping.set(path, id);
-				}
-				visit(tree, 'image', function raiseError(node: Image) {
-					node.url = mapping.get(node.url)!;
-				});
-			}
 
 			vfile.data.imagePaths = Array.from(imagePaths);
 		};
diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts
index 1b88f2442..dc3bbce32 100644
--- a/packages/markdown/remark/src/types.ts
+++ b/packages/markdown/remark/src/types.ts
@@ -68,10 +68,6 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
 	/** Used for frontmatter injection plugins */
 	frontmatter?: Record<string, any>;
 	experimentalAssets?: boolean;
-	imageService?: any;
-	assetsDir?: URL;
-	resolveImage?: (path: string) => Promise<string>;
-	getImageMetadata?: any;
 }
 
 export interface MarkdownHeading {