fix(mdx-components): replace <img> tags with <Image> component for optimized image handling

Author: usmonovshohruxmirzo

src/components/Layout/HomeContent.js

@@ -509,11 +509,14 @@ export function HomeContent() {
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <div className="uwu-visible flex justify-center">
-              <img
+              <Image
                 alt="logo by @sawaratsuki1004"
                 title="logo by @sawaratsuki1004"
                 className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
                 src="/images/uwu.png"
+                width={128}
+                height={128}
+                priority
               />
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
@@ -802,11 +805,13 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
               className={cn(
                 'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
               )}>
-              <img
-                loading={isLazy ? 'lazy' : 'eager'}
+              <Image
                 src={src}
                 alt={alt}
                 className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+                width={400}
+                height={300}
+                loading={isLazy ? 'lazy' : 'eager'}
               />
             </div>
           </div>
@@ -1564,7 +1569,7 @@ function Cover({background, children}) {
       <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
         {children}
       </div>
-      <img
+      <Image
         src={background}
         width={500}
         height={263}
@@ -1641,11 +1646,13 @@ function Thumbnail({video}) {
         <>
           <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
             {image.speakers.map((src, i) => (
-              <img
+              <Image
                 key={i}
                 className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
                 src={src}
                 alt=""
+                width={32}
+                height={32}
               />
             ))}
           </div>

src/components/MDX/MDXComponents.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -315,7 +316,7 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <img
+        <Image
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
@@ -351,7 +352,7 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
+        <Image
           className="text-primary"
           src={info.src}
           alt={info.alt}
@@ -485,9 +486,17 @@ function YouTubeIframe(props: any) {
   );
 }
 
-function Image(props: any) {
-  const {alt, ...rest} = props;
-  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
+function ImageComponent(props: any) {
+  const {alt, width = 700, height = 400, ...rest} = props;
+  return (
+    <Image
+      alt={alt}
+      width={width}
+      height={height}
+      className="max-w-[calc(min(700px,100%))]"
+      {...rest}
+    />
+  );
 }
 
 export const MDXComponents = {
@@ -504,7 +513,7 @@ export const MDXComponents = {
   h5: H5,
   hr: Divider,
   a: Link,
-  img: Image,
+  img: ImageComponent,
   BlogCard,
   code: InlineCode,
   pre: CodeBlock,