feat: optimize image loading and critical rendering path by adding image preloads in webpack config, updating image handling in multiple components, and ensuring alt attributes are set for accessibility

src/components/MainPageLayout.js

@@ -606,13 +606,27 @@ const MainPageLayout = () => {
                       sx={{
                         height: "100%",
                         bgcolor: box.bgcolor,
-                        backgroundImage: `url("${box.image}")`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
                         position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                       }}
                     >
+                      <img
+                        src={box.image}
+                        alt={box.title}
+                        fetchPriority="high"
+                        loading="eager"
+                        style={{
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          position: "absolute",
+                          top: "50%",
+                          left: "50%",
+                          transform: "translate(-50%, -50%)",
+                        }}
+                      />
                       <Box
                         sx={{
                           position: "absolute",