From db061fdc10d38880bceea7689160c74985cdbe36 Mon Sep 17 00:00:00 2001
From: Krystof <krystof.kratky2003@gmail.com>
Date: Tue, 5 Nov 2024 03:28:19 +0100
Subject: [PATCH] refactor(web): image optimization

---
 apps/web/next.config.mjs       |  2 ++
 apps/web/src/app/not-found.tsx |  7 +++++--
 apps/web/src/app/page.tsx      | 11 ++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index d8e0a4ee..38a7f795 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -6,6 +6,8 @@ const nextConfig = {
     pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
     images: {
         formats: ["image/avif", "image/webp"],
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     },
 };
 
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index b3d28c53..cf0a0d85 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -27,9 +27,12 @@ const NotFoundPage = () => {
                     className="font-bold text-zinc-800 text-5xl flex items-center gap-2"
                 >
                     <Image
-                        className="rounded-lg h-12 w-auto"
-                        src={MetroNowIcon}
+                        className="rounded-lg"
                         alt="Icon"
+                        src={MetroNowIcon}
+                        placeholder="blur"
+                        height={48}
+                        priority
                     />
                     Metro&nbsp;Now
                 </Link>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index b687fd14..2acb6151 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -21,9 +21,12 @@ const LandingPage = () => {
             <div className="flex flex-col gap-2 items-center justify-center text-center">
                 <h1 className="text-6xl font-bold text-zinc-800 flex gap-2 items-center">
                     <Image
-                        className="rounded-xl h-14 w-auto"
-                        src={MetroNowIcon}
+                        className="rounded-xl"
                         alt="Icon"
+                        src={MetroNowIcon}
+                        placeholder="blur"
+                        height={56}
+                        priority
                     />
                     Metro&nbsp;Now!
                 </h1>
@@ -37,6 +40,7 @@ const LandingPage = () => {
                         className="mt-4"
                         alt="Download on App Store"
                         height={50}
+                        priority
                     />
                 </Link>
             </div>
@@ -44,9 +48,10 @@ const LandingPage = () => {
                 src={MetroNowWatch}
                 alt="Apple watch screenshots"
                 height={1200}
+                placeholder="blur"
+                quality={90}
                 priority
             />
-
             <div className="mb-32 gap-4 grid text-center lg:mb-0 lg:w-full lg:max-w-7xl lg:grid-cols-3 lg:text-left">
                 <Card className="group">
                     <Link