refactor: update image rendering logic in MainPageLayout to load images conditionally based on opacity for improved performance

src/components/MainPageLayout.js

@@ -612,11 +612,11 @@ const MainPageLayout = () => {
                         justifyContent: "center",
                       }}
                     >
+                      {/* Image loaded only when needed */}
+                      {getOpacity(pageType) === 1 && (
                         <img
                           src={box.image}
                           alt={box.title}
-                        fetchPriority="high"
-                        loading="eager"
                           style={{
                             maxWidth: "100%",
                             maxHeight: "100%",
@@ -627,6 +627,7 @@ const MainPageLayout = () => {
                             transform: "translate(-50%, -50%)",
                           }}
                         />
+                      )}
                       <Box
                         sx={{
                           position: "absolute",