Decrease index logo fetched image width, increase quality, TODO bg im…

…age convert to next/Image
acmutsa · Feb 2, 2023 · 8c32d9c · 8c32d9c
1 parent b9c3681
commit 8c32d9c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -28,7 +28,9 @@ const Home: NextPage = () => {
 							alt="ACM-UTSA Logo"
 							className="absolute overflow-visible drop-shadow-sm"
 							src={"/img/logo.png"}
-							layout="fill"
+							width={400}
+							height={400}
+							quality={90}
 							objectFit="cover"
 							priority={true}
 						/>

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -9,6 +9,7 @@
 @tailwind utilities;
 
 @layer utilities {
+  // TODO: Transform the background image into a Next.JS Image component ( https://uharston.medium.com/next-js-image-optimization-on-background-images-65de18ea03f5 )
   .bg-acm {
     background: linear-gradient(#00000066, #00000066), url('/img/bg.png') fixed center / cover no-repeat;
   }