refactor: use Next image optimization

lsst-epo · Nov 21, 2024 · 2570b16 · 2570b16
1 parent b66e3b5
commit 2570b16
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/components/molecules/Hero/index.tsx b/components/molecules/Hero/index.tsx
@@ -18,15 +18,21 @@ const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
 
   if (!imageData?.url) return null;
 
+  const { width, height, url: src, altText: alt = "" } = imageData;
+
   return (
-    <Styled.HeroContainer
-      data-cy="hero"
-      style={{
-        "--Hero-object-position": `${focalPointX || 50}% ${focalPointY || 50}%`,
-      }}
-      className={className}
-    >
-      <Styled.HeroImage image={{ ...imageData, priority: true }} />
+    <Styled.HeroContainer data-cy="hero" className={className}>
+      <Styled.HeroImage
+        {...{ width, height, src, alt }}
+        style={{
+          "--Hero-object-position": `${focalPointX || 50}% ${
+            focalPointY || 50
+          }%`,
+        }}
+        priority
+        fetchPriority="high"
+        quality={90}
+      />
       {children}
     </Styled.HeroContainer>
   );

diff --git a/components/molecules/Hero/styles.ts b/components/molecules/Hero/styles.ts
@@ -1,7 +1,8 @@
 "use client";
 import styled from "styled-components";
 import { fluidScale, containerFullBleed } from "@/styles/globalStyles";
-import Image from "@rubin-epo/epo-react-lib/Image";
+// import Image from "@rubin-epo/epo-react-lib/Image";
+import Image from "next/image";
 
 export const HeroContainer = styled.div`
   ${containerFullBleed("CONTAINER_FULL")}

diff --git a/next.config.js b/next.config.js
@@ -28,6 +28,22 @@ module.exports = {
       },
     ];
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "storage.googleapis.com",
+      },
+      {
+        protocol: "https",
+        hostname: "rubin.canto.com",
+      },
+      {
+        protocol: "https",
+        hostname: "noirlab.edu",
+      },
+    ],
+  },
   experimental: {
     forceSwcTransforms: true,
   },