From b56754c84f08859a73e613be88e32635f307cb7b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 24 Apr 2024 11:05:22 +0200
Subject: [PATCH] Optimize image loading and update image loader URL in
 page.tsx

---
 nextjs/spa-with-image-optimization/app/page.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/nextjs/spa-with-image-optimization/app/page.tsx b/nextjs/spa-with-image-optimization/app/page.tsx
index 15613e6..14bc116 100644
--- a/nextjs/spa-with-image-optimization/app/page.tsx
+++ b/nextjs/spa-with-image-optimization/app/page.tsx
@@ -29,18 +29,13 @@ export default function Home() {
       </div>
 
       <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-
+      <div className="w-[600px] h-[800px]">
           <Image
             src="/image1.jpg"
             alt="Image"
-            width={700}
-            height={475}
-            sizes="100vw"
-            style={{
-              width: "100%",
-              height: "auto",
-            }}
+            fill
           />
+          </div>
       </div>
 
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">