From 9accc45f3c15d89b86a22eb7c70c6eb1ff909264 Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Sat, 15 Aug 2026 05:24:42 +0200
Subject: [PATCH] feat: use next/image for MDX images

---
 src/components/MDX/MDXComponents.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 5dc177a04cd..df6efc90a15 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -13,6 +13,7 @@ import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import type {HTMLAttributes} from 'react';
+import NextImage from 'next/image';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
@@ -514,8 +515,16 @@ function YouTubeIframe(props: any) {
 }
 
 function Image(props: any) {
-  const {alt, ...rest} = props;
-  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
+  const {alt, width, height, ...rest} = props;
+  return (
+    <NextImage
+      alt={alt}
+      width={width ? Number(width) : 700}
+      height={height ? Number(height) : 400}
+      className="max-w-[calc(min(700px,100%))] h-auto"
+      {...rest}
+    />
+  );
 }
 
 export const MDXComponents = {