2 files changed, 50 insertions, 3 deletions

diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts
index e6584aacf..2217a4da7 100644
--- a/packages/integrations/mdx/src/plugins.ts
+++ b/packages/integrations/mdx/src/plugins.ts
@@ -43,7 +43,7 @@ export function createMdxProcessor(mdxOptions: MdxOptions, extraOptions: MdxProc
 }
 
 function getRemarkPlugins(mdxOptions: MdxOptions): PluggableList {
-	let remarkPlugins: PluggableList = [remarkCollectImages, remarkImageToComponent];
+	let remarkPlugins: PluggableList = [];
 
 	if (!isPerformanceBenchmark) {
 		if (mdxOptions.gfm) {
@@ -54,7 +54,7 @@ function getRemarkPlugins(mdxOptions: MdxOptions): PluggableList {
 		}
 	}
 
-	remarkPlugins = [...remarkPlugins, ...mdxOptions.remarkPlugins];
+	remarkPlugins = [...remarkPlugins, ...mdxOptions.remarkPlugins, remarkCollectImages, remarkImageToComponent];
 
 	if (!isPerformanceBenchmark) {
 		// Apply syntax highlighters after user plugins to match `markdown/remark` behavior
diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts
index 810056def..86f04aa47 100644
--- a/packages/integrations/mdx/src/remark-images-to-component.ts
+++ b/packages/integrations/mdx/src/remark-images-to-component.ts
@@ -1,6 +1,6 @@
 import type { MarkdownVFile } from '@astrojs/markdown-remark';
 import type { Image, Parent } from 'mdast';
-import type { MdxJsxFlowElement, MdxjsEsm } from 'mdast-util-mdx';
+import type { MdxJsxFlowElement, MdxjsEsm, MdxJsxAttribute } from 'mdast-util-mdx';
 import { visit } from 'unist-util-visit';
 import { jsToTreeNode } from './utils.js';
 
@@ -89,6 +89,53 @@ export function remarkImageToComponent() {
 					});
 				}
 
+				if (node.data && node.data.hProperties) {
+					const createArrayAttribute = (name: string, values: string[]): MdxJsxAttribute => {
+						return {
+							type: 'mdxJsxAttribute',
+							name: name,
+							value: {
+								type: 'mdxJsxAttributeValueExpression',
+								value: name,
+								data: {
+									estree: {
+										type: 'Program',
+										body: [
+											{
+												type: 'ExpressionStatement',
+												expression: {
+													type: 'ArrayExpression',
+													elements: values.map((value) => ({
+														type: 'Literal',
+														value: value,
+														raw: String(value),
+													})),
+												},
+											},
+										],
+										sourceType: 'module',
+										comments: [],
+									},
+								},
+							},
+						};
+					};
+					// Go through every hProperty and add it as an attribute of the <Image>
+					Object.entries(node.data.hProperties as Record<string, string | string[]>).forEach(
+						([key, value]) => {
+							if (Array.isArray(value)) {
+								componentElement.attributes.push(createArrayAttribute(key, value));
+							} else {
+								componentElement.attributes.push({
+									name: key,
+									type: 'mdxJsxAttribute',
+									value: String(value),
+								});
+							}
+						}
+					);
+				}
+
 				parent!.children.splice(index!, 1, componentElement);
 			}
 		});