diff --git a/components/MDX/Image/index.tsx b/components/MDX/Image/index.tsx
new file mode 100644
index 0000000000000..42634bb9ad24b
--- /dev/null
+++ b/components/MDX/Image/index.tsx
@@ -0,0 +1,25 @@
+import type { ImageProps } from 'next/image';
+import Image from 'next/image';
+import type { FC } from 'react';
+
+const MDXImage: FC<ImageProps> = ({ width, height, alt, ...props }) => {
+  if (!width || !height) {
+    // Since `width` and `height` are not provided in the Markdown image format,
+    // we provide the height and width automatically.
+    // @see https://nextjs.org/docs/pages/building-your-application/optimizing/images
+    return (
+      <Image
+        {...props}
+        alt={alt}
+        width={0}
+        height={0}
+        sizes="(min-width: 768px) 200vw, 500vw"
+        className="h-auto w-auto"
+      />
+    );
+  }
+
+  return <Image {...props} alt={alt} width={width} height={height} />;
+};
+
+export default MDXImage;
diff --git a/next.config.mjs b/next.config.mjs
index be1f1400025fd..08a807e3a3e8c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -27,8 +27,27 @@ const nextConfig = {
   // We allow the BASE_PATH to be overridden in case that the Website
   // is being built on a subdirectory (e.g. /nodejs-website)
   basePath: BASE_PATH,
-  // We disable image optimisation during static export builds
-  images: { unoptimized: ENABLE_STATIC_EXPORT },
+  images: {
+    // We disable image optimisation during static export builds
+    unoptimized: ENABLE_STATIC_EXPORT,
+    // We allow SVGs to be used as images
+    dangerouslyAllowSVG: true,
+    // We add it to the remote pattern for the static images we use from GitHub
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        port: '',
+        pathname: '/nodejs/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'user-images.githubusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
   // On static export builds we want the output directory to be "build"
   distDir: ENABLE_STATIC_EXPORT ? 'build' : '.next',
   // On static export builds we want to enable the export feature
diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs
index a28a3d1d88d5b..44581728dd13c 100644
--- a/next.mdx.use.mjs
+++ b/next.mdx.use.mjs
@@ -22,6 +22,7 @@ import Link from './components/Link';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import MDXCodeBox from './components/MDX/CodeBox';
 import MDXCodeTabs from './components/MDX/CodeTabs';
+import MDXImage from './components/MDX/Image';
 import SearchPage from './components/MDX/SearchPage';
 import WithBadge from './components/withBadge';
 import WithBanner from './components/withBanner';
@@ -96,4 +97,6 @@ export const htmlComponents = {
   blockquote: Blockquote,
   // Renders a CodeBox Component for `pre` tags
   pre: MDXCodeBox,
+  // Renders an Image Component for `img` tags
+  img: MDXImage,
 };