Add lazy loading to image

nakujaproject · May 11, 2024 · cea22cb · cea22cb
1 parent 999b4ef
commit cea22cb
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 10 deletions.
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -54,12 +54,12 @@ const About = () => {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-9">
             <div className="pb-5 pr-9 relative overflow-hidden rounded-2xl">
               <div className="relative">
-                <img className="w-full object-contain" src={thumbnail} alt="" />
+                <img className="w-full object-contain" src={thumbnail} alt="" loading="lazy" />
                 <button
                   className="absolute top-1/2 left-1/2 z-10 flex h-[78px] w-[78px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-green-500 animate-pulse"
                   onClick={() => toggleVideoVisibility(0)}
                 >
-                  <img src={playicon} alt="" />
+                  <img src={playicon} alt="" loading="lazy" />
                 </button>
               </div>
 
@@ -114,6 +114,7 @@ const About = () => {
                 src={N2_interns}
                 alt="N2 interns"
                 className="block rounded-lg"
+                loading="lazy"
               />
               <small className="text-sm italic text-gray-400">
                 Visit to Broglio Space Center in April 2022 supported by Kenya
@@ -185,12 +186,13 @@ const About = () => {
                   className="w-full object-contain"
                   src={thumbnail1}
                   alt=""
+                  loading="lazy"
                 />
                 <button
                   className="absolute top-1/2 left-1/2 z-10 flex h-[78px] w-[78px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-green-500 animate-pulse"
                   onClick={() => toggleVideoVisibility(1)}
                 >
-                  <img src={playicon} alt="" />
+                  <img src={playicon} alt="" loading="lazy"  />
                 </button>
               </div>
 
@@ -211,12 +213,13 @@ const About = () => {
                   className="w-full object-contain"
                   src={thumbnail2}
                   alt=""
+                  loading="lazy"
                 />
                 <button
                   className="absolute top-1/2 left-1/2 z-10 flex h-[78px] w-[78px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-green-500 animate-pulse"
                   onClick={() => toggleVideoVisibility(2)}
                 >
-                  <img src={playicon} alt="" />
+                  <img src={playicon} alt="" loading="lazy" />
                 </button>
               </div>
 

diff --git a/src/components/BlogDetail.jsx b/src/components/BlogDetail.jsx
@@ -59,6 +59,7 @@ const BlogDetail = () => {
             src={issue.user.avatar_url}
             alt={issue.user.login}
             className="w-8 h-8 rounded-full mr-2"
+            loading="lazy"
           />
           <h3 className="text-sm font-bold">{issue.user.login}</h3>
         </div>
@@ -77,6 +78,7 @@ const BlogDetail = () => {
                     src={comment.user.avatar_url}
                     alt={comment.user.login}
                     className="w-8 h-8 rounded-full mr-2"
+                    loading="lazy"
                   />
                   <h3 className="text-sm font-bold">{comment.user.login}</h3>
                 </div>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -60,35 +60,35 @@ const Footer = () => {
               target="_blank"
               className="border border-gray-300 p-2 rounded-full aspect-square text-gray-700 transition-all duration-500 hover:text-blue-600 hover:border-blue-600 focus-within:outline-0 focus-within:text-blue-600 focus-within:border-blue-600"
             >
-              <img src={github} alt="github" />
+              <img src={github} alt="github" loading="lazy"  />
             </a>
             <a
               href="https://www.youtube.com/channel/UCE67lrxSyV97KVOOqOtIdrQ"
               target="_blank"
               className="border border-gray-300 p-2 rounded-full aspect-square text-gray-700 transition-all duration-500 hover:text-blue-600 hover:border-blue-600 focus-within:outline-0 focus-within:text-blue-600 focus-within:border-blue-600"
             >
-              <img src={youtube} alt="YouTube" />
+              <img src={youtube} alt="YouTube" loading="lazy"  />
             </a>
             <a
               href="https://www.linkedin.com/company/nakuja-project/"
               target="_blank"
               className="border border-gray-300 p-2 rounded-full aspect-square text-gray-700 transition-all duration-500 hover:text-blue-600 hover:border-blue-600 focus-within:outline-0 focus-within:text-blue-600 focus-within:border-blue-600"
             >
-              <img src={linkedin} alt="LinkedIn" />
+              <img src={linkedin} alt="LinkedIn" loading="lazy" />
             </a>
             <a
               href="https://twitter.com/Nakuja6"
               target="_blank"
               className="border border-gray-300 p-2 rounded-full aspect-square text-gray-700 transition-all duration-500 hover:text-blue-600 hover:border-blue-600 focus-within:outline-0 focus-within:text-blue-600 focus-within:border-blue-600"
             >
-              <img src={twitter} alt="Twitter" />
+              <img src={twitter} alt="Twitter" loading="lazy" />
             </a>
             <a
               href="https://www.instagram.com/nakujaproject/"
               target="_blank"
               className="border border-gray-300 p-2 rounded-full aspect-square text-gray-700 transition-all duration-500 hover:text-blue-600 hover:border-blue-600 focus-within:outline-0 focus-within:text-blue-600 focus-within:border-blue-600"
             >
-              <img src={instagram} alt="Insta" />
+              <img src={instagram} alt="Insta" loading="lazy"/>
             </a>
           </div>
         </div>

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -105,6 +105,7 @@ const Home = () => {
                 <img
                   src={globe}
                   className="relative h-[20px] w-[20px] md:h-[34px] md:w-[34px]"
+                  loading="lazy"
                 />
               </div>
               <div
@@ -161,6 +162,7 @@ const Home = () => {
                 <img
                   src={people}
                   className="relative h-[24px] w-[23px] md:h-[34px] md:w-[34px]"
+                  loading="lazy"
                 />
               </div>
               <div
@@ -209,6 +211,7 @@ const Home = () => {
                 <img
                   src={building}
                   className="relative h-[20px] w-[20px] md:h-[34px] md:w-[34px]"
+                  loading="lazy"
                 />
               </div>
               <div
@@ -256,6 +259,7 @@ const Home = () => {
                 <img
                   src={partnership}
                   className="relative h-[20px] w-[20px] md:h-[34px] md:w-[34px]"
+                  loading="lazy"
                 />
               </div>
               <div
@@ -303,13 +307,15 @@ const Home = () => {
                   className="h-9"
                   src="https://ksa.go.ke/assets/images/ksa-logo-new.png-web2-207x165.png"
                   alt="Client logo"
+                  loading="lazy"
                 />
               </a>
               <a href="#" className="flex justify-center items-center">
                 <img
                   className="h-9"
                   src="https://www.jkuat.ac.ke/directorates/dipuil/wp-content/uploads/2015/11/jkuat-logo.png"
                   alt="Client logo"
+                  loading="lazy"
                 />
               </a>
 

diff --git a/src/components/JoinUs.jsx b/src/components/JoinUs.jsx
@@ -16,6 +16,7 @@ const JoinUs = () => {
             src="https://nakujaproject.com/image/gallery/dryrun.webp"
             alt="image"
             className="mt-4 rounded-lg"
+            loading="lazy"
           />
         </div>
         <div className="mt-12">

diff --git a/src/components/Roadmap.jsx b/src/components/Roadmap.jsx
@@ -26,6 +26,7 @@ const Roadmap = () => (
                     width={550}
                     height={550}
                     alt="Grid"
+                    loading="lazy"
                   />
                 </div>
                 <div className="relative z-1">
@@ -39,6 +40,7 @@ const Roadmap = () => (
                         width={16}
                         height={16}
                         alt={status}
+                        loading="lazy"
                       />
                       <div className="tagline">{status}</div>
                     </div>

diff --git a/src/components/Rocket.jsx b/src/components/Rocket.jsx
@@ -151,20 +151,23 @@ const Rocket = () => {
                       src={rocket.image}
                       alt={`${rocket.name} Image`}
                       className="w-full h-auto object-cover rounded-lg"
+                      loading="lazy"
                     />
                   )}
                   {rocket.image1 && (
                     <img
                       src={rocket.image1}
                       alt={`${rocket.name} Image 1`}
                       className="w-full h-auto object-cover rounded-lg"
+                      loading="lazy"
                     />
                   )}
                   {rocket.image2 && (
                     <img
                       src={rocket.image2}
                       alt={`${rocket.name} Image 2`}
                       className="w-full h-auto object-cover rounded-lg"
+                      loading="lazy"
                     />
                   )}
                 </div>

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
@@ -5,12 +5,13 @@ const TeamCard = ({ name, position, education, image }) => (
   <div className="flex flex-col rounded-lg shadow-sm bg-white overflow-hidden hover:shadow-md hover:border border-blue-500">
     <div className="flex justify-center">
       {image ? (
-        <img className="w-32 h-32 rounded-full" src={image} alt={name} />
+        <img className="w-32 h-32 rounded-full" src={image} alt={name} loading="lazy" />
       ) : (
         <img
           className="w-32 h-32 rounded-full border hover:border-blue-500"
           src="https://www.mountsinai.on.ca/wellbeing/our-team/team-images/person-placeholder/image"
           alt="Placeholder"
+          loading="lazy"
         />
       )}
     </div>