From 8236ce78f1e0c3001a4b17922aff9260f93c5e1a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 24 Apr 2024 10:49:25 +0200
Subject: [PATCH] Update image loader URL and optimize image in page.tsx

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

diff --git a/nextjs/spa-with-image-optimization/app/page.tsx b/nextjs/spa-with-image-optimization/app/page.tsx
index 9030a8e..15613e6 100644
--- a/nextjs/spa-with-image-optimization/app/page.tsx
+++ b/nextjs/spa-with-image-optimization/app/page.tsx
@@ -30,17 +30,17 @@ export default function Home() {
 
       <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-96">
           <Image
             src="/image1.jpg"
             alt="Image"
-            width={500}
-            height={500}
-            quality="85"
-            loading="lazy"
-            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            width={700}
+            height={475}
+            sizes="100vw"
+            style={{
+              width: "100%",
+              height: "auto",
+            }}
           />
-        </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">