Merge pull request #232 from Amnyadav/feat-optimize-image-loading-time

bug: optimized image loading time #217
RamakrushnaBiswal · Oct 12, 2024 · 7599313 · 7599313
2 parents 6102828 + 11264ba
commit 7599313
Show file tree

Hide file tree

Showing 17 changed files with 33 additions and 17 deletions.
diff --git a/frontend/src/components/Pages/Admin.jsx b/frontend/src/components/Pages/Admin.jsx
@@ -274,6 +274,7 @@ const Admin = () => {
                     <img
                       src={event.image}
                       alt={event.title}
+                      loading='lazy'
                       className="h-[400px] w-full"
                     />
                   </div>

diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
@@ -245,6 +245,7 @@ export default function Boardgame() {
                   <img
                     src={board.src}
                     alt={board.title}
+                    loading="lazy"
                     width="500"
                     height="400"
                     className="object-cover w-full h-48 transition-all duration-300 ease-in-out group-hover:h-32"

diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
@@ -124,14 +124,15 @@ export default function Event() {
               <img
                 src={band}
                 alt="band"
+                loading="lazy"
                 className="w-2/5 absolute left-1/2 top-[20%] z-10 translate-x-[-50%] mx-auto"
               />
               <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
                 Upcoming Events and much more....
               </h1>
               <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 justify-between shadow-md">
-                <img src={game} alt="game" className="w-28 h-28" />
-                <img src={spin} alt="game" className="w-28 h-28" />
+                <img src={game} alt="game" loading="lazy" className="w-28 h-28" />
+                <img src={spin} alt="game" loading="lazy" className="w-28 h-28" />
               </div>
             </div>
           </div>
@@ -189,19 +190,19 @@ export default function Event() {
                 <div className="splide__track w-full ">
                   <ul className="splide__list">
                     <li className="splide__slide ">
-                      <img src={img1} alt="Event 1" className="w-full h-full" />
+                      <img src={img1} alt="Event 1" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img2} alt="Event 2" className="w-full h-full" />
+                      <img src={img2} alt="Event 2" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img3} alt="Event 3" className="w-full h-full" />
+                      <img src={img3} alt="Event 3" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img4} alt="Event 4" className="w-full h-full" />
+                      <img src={img4} alt="Event 4" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img5} alt="Event 6" className="w-full h-full" />
+                      <img src={img5} alt="Event 6" loading="lazy" className="w-full h-full" />
                     </li>
                     {/* Add more images here */}
                   </ul>
@@ -223,6 +224,7 @@ export default function Event() {
                     <img
                       src={event.image}
                       alt={event.title}
+                      loading="lazy"
                       className="h-[400px] w-full"
                     />
                   </div>

diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
@@ -55,7 +55,7 @@ const Login = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
         className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"

diff --git a/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx
@@ -148,11 +148,13 @@ const ThirdPage = () => {
                   src={bubbleTea}
                   className="md:h-40 md:w-50 h-20 w-20 object-contain"
                   alt="Bubble Tea"
+                  loading="lazy"
                 />
                 <img
                   src={bubbleTea2}
                   className="md:h-40 md:w-50 h-20 w-20 object-contain"
                   alt="Bubble Tea"
+                  loading="lazy"
                 />
               </div>
             </div>

diff --git a/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx
@@ -146,13 +146,14 @@ const FirstPage = () => {
               </div>
 
               <div className="flex justify-center -space-x-36">
-                <img src={coffee} className="h-50 w-50 " alt="Coffee" />
+                <img src={coffee} className="h-50 w-50 " alt="Coffee" loading="lazy"/>
                 <img
                   src={coffee}
                   className="h-50 w-50 transform scale-110"
                   alt="Coffee"
+                  loading="lazy"
                 />
-                <img src={coffee} className="h-50 w-50" alt="Coffee" />
+                <img src={coffee} className="h-50 w-50" alt="Coffee" loading="lazy"/>
               </div>
             </div>
           </div>

diff --git a/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
@@ -10,6 +10,7 @@ const ThankPage = () => {
         <img
           src={logo}
           alt="Sip&Play Cafe Logo"
+          loading="lazy"
           className="md:hidden block absolute w-3/4 h-3/4 -mt-44 items-center object-contain opacity-[0.5]"
           style={{
             top: '50%',
@@ -22,6 +23,7 @@ const ThankPage = () => {
           <img
             src={logo}
             alt="Sip&Play Cafe Logo"
+            loading="lazy"
             className="absolute w-3/4 h-3/4 object-contain opacity-[0.1]"
             style={{
               top: '50%',

diff --git a/frontend/src/components/Pages/Notfound.jsx b/frontend/src/components/Pages/Notfound.jsx
@@ -13,6 +13,7 @@ const NotFound = () => {
             <img
                 src={Notfound} // Replace with your actual GIF path
                 alt="Not Found GIF"
+                loading="lazy"
                 className="w-full max-w-md"
             />
             <p className="mt-8 text-lg text-gray-700 text-center">

diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
@@ -54,6 +54,7 @@ export default function Register() {
             <img
               src={pic}
               alt="Board Game Cafe"
+              loading="lazy"
               className="w-full h-auto  rounded-s-full"
             />
           </div>
@@ -165,6 +166,7 @@ export default function Register() {
                   <img
                     src={game.src}
                     alt={game.title}
+                    loading="lazy"
                     className="mb-4 w-64 h-64 object-cover"
                   />
                   <div className="font-medium">{game.title}</div>

diff --git a/frontend/src/components/Pages/ResetPassword.jsx b/frontend/src/components/Pages/ResetPassword.jsx
@@ -73,7 +73,7 @@ const ResetPassword = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
         className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"

diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
@@ -77,7 +77,7 @@ const Signup = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]">
         <div className="title text-[#323232] font-black text-7xl mb-6">
           Play Cafe,

diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -61,7 +61,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('coffee')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} loading="lazy" />
 
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
           <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
@@ -81,7 +81,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('food')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} loading="lazy" />
 
           <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
           <p className="text-gray-600">{todaysSpecial.food.description}</p>
@@ -101,7 +101,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('drink')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} loading="lazy"/>
 
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
           <p className="text-gray-600">{todaysSpecial.drink.description}</p>

diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
@@ -82,6 +82,7 @@ const Navbar = () => {
                 className="w-14 h-14 bg-white rounded-full p-0"
                 alt="logo"
                 src={Logo}
+                loading="lazy"
               />
             </div>
           </Link>

diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
@@ -31,6 +31,7 @@ const Section2 = () => {
             className="w-24 bg-transparent p-0 rounded-3xl h-24"
             alt="logo"
             src={Logo}
+            loading="lazy"
           />
         </div>
       )}

diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx
@@ -99,6 +99,7 @@ const FeedbackForm = () => {
               <img
                 src={chess}
                 alt="Chess"
+                loading="lazy"
                 className="md:p-10 p-5 object-contain bg-[#004D43] rounded-full shadow-2xl"
               />
             </div>

diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
@@ -46,11 +46,11 @@ function Landing() {
           <div>
             <div className="flex justify-center pt-64 z-0">
               <div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20 items-center">
-                <img src={heropic} alt="" className="w-2/4" />
+                <img src={heropic} alt="" loading="lazy" className="w-2/4" />
               </div>
 
               <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
-                <img src={heropic} alt="" className="w-2/4" />
+                <img src={heropic} alt="" loading="lazy" className="w-2/4" />
               </div>
             </div>
           </div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -36,3 +36,4 @@
   background-color: #004d43;
   border-radius: 10px;
 }
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,4 @@
		background-color: #004d43;
		border-radius: 10px;
		}