Merge pull request #65 from Bitshala/image-optimizations

refac: image optimization for home page
Bitshala · Dec 6, 2023 · d44e7aa · d44e7aa
2 parents e7e6168 + cabbbaf
commit d44e7aa
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 18 deletions.
diff --git a/public/home/headerbg.png b/public/home/headerbg.png
diff --git a/public/home/headerbg.webp b/public/home/headerbg.webp
diff --git a/public/testimonial/background.png b/public/testimonial/background.png
diff --git a/public/testimonial/background.webp b/public/testimonial/background.webp
diff --git a/public/testimonial/bitcoin.png → src/assets/testimonial/bitcoin.png b/public/testimonial/bitcoin.png → src/assets/testimonial/bitcoin.png
diff --git a/public/testimonial/goku.png → src/assets/testimonial/goku.png b/public/testimonial/goku.png → src/assets/testimonial/goku.png
diff --git a/public/testimonial/person1.png → src/assets/testimonial/person1.png b/public/testimonial/person1.png → src/assets/testimonial/person1.png
diff --git a/src/components/cohort/Checkerboard.astro b/src/components/cohort/Checkerboard.astro
@@ -21,6 +21,7 @@
       <img
         src="/website-v2/cohort/checkerboard1.png"
         class="w-auto"
+        alt="Cohort Community"
       />
     </div>
   </div>
@@ -31,6 +32,7 @@
       <img
         src="/website-v2/cohort/checkerboard2.png"
         class="w-auto"
+        alt="Structured Cohort"
       />
     </div>
     <div
@@ -71,6 +73,7 @@
       <img
         src="/website-v2/cohort/checkerboard3.png"
         class="w-auto"
+        alt="Cohort Job Board"
       />
     </div>
   </div>

diff --git a/src/components/cohortPages/MeetYourTAs.astro b/src/components/cohortPages/MeetYourTAs.astro
@@ -21,6 +21,7 @@ const { team, color } = Astro.props;
         <img
           src={`/website-v2/people/${member.image}.png`}
           class="h-28 items-center  p-3 "
+          alt={member.name}
         />
         <div class="flex flex-col">
           <div class="flex">
@@ -33,12 +34,14 @@ const { team, color } = Astro.props;
               <img
                 src="/website-v2/people/github.png"
                 class="mr-3 mt-3 h-8 rounded-xl bg-white "
+                alt="Github"
               />
             </a>
             <a>
               <img
                 src="/website-v2/people/twitter.png"
                 class="mr-3 mt-3 h-8 rounded-xl bg-white "
+                alt="Twitter"
               />
             </a>
           </div>

diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx
@@ -50,7 +50,11 @@ const Carousel = ({
         {config[page].title}
       </h1>
       <div className="lg:flex">
-        <img src={config[page].img} />
+        <img
+          src={config[page].img}
+          loading="lazy"
+          alt={config[page].title}
+        />
         <div className="m-2 flex flex-col justify-between lg:p-10 lg:text-2xl">
           <div>{config[page].content}</div>
           <button className="mt-5 w-1/2 p-2 outline">
@@ -65,6 +69,7 @@ const Carousel = ({
               key={page.title}
               className="h-3 w-3 rounded-full outline hover:bg-white"
               onClick={() => setPage(index)}
+              aria-label={page.title}
             />
           );
         })}

diff --git a/src/components/common/Footer.astro b/src/components/common/Footer.astro
@@ -90,6 +90,7 @@ const list3 = [
       <img
         src="/website-v2/footer/logo.png"
         class="mb-60 h-16"
+        alt="Bitshala Logo"
       />
       <div>Copyright © 2023 Bitshala</div>
     </div>

diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
@@ -28,7 +28,11 @@ const {
 >
   <div class="mb-10 flex w-full justify-between">
     <a href="/website-v2">
-      <img src="/website-v2/footer/logo.png" class="h-16" />
+      <img
+        src="/website-v2/footer/logo.png"
+        class="h-16"
+        alt="Bitshala Logo"
+      />
     </a>
     <Hamburger client:only />
   </div>

diff --git a/src/components/common/videoList.tsx b/src/components/common/videoList.tsx
@@ -18,7 +18,11 @@ export const VideoList = ({
                 href={vid.link}
                 target="_blank"
               >
-                <img className=" mr-5 h-24" src={vid.img} />
+                <img
+                  className=" mr-5 h-24"
+                  src={vid.img}
+                  alt={vid.title}
+                />
                 {vid.title}
               </a>
             ),

diff --git a/src/components/home/People.astro b/src/components/home/People.astro
@@ -99,6 +99,7 @@ const advisors = [
           <img
             src={`/website-v2/people/${member.image}.png`}
             class="h-28 items-center p-3 lg:h-40"
+            alt={member.name}
           />
           <div class="flex w-full flex-col">
             <div class="flex w-full justify-between px-5 py-3">
@@ -112,12 +113,14 @@ const advisors = [
                   <img
                     src="/website-v2/people/github.png"
                     class="m-1 h-6 rounded-xl bg-white lg:h-10"
+                    alt="Github"
                   />
                 </a>
                 <a href={member.twitter} target="_blank">
                   <img
                     src="/website-v2/people/twitter.png"
                     class="m-1 h-6 rounded-xl bg-white lg:h-10"
+                    alt="Twitter"
                   />
                 </a>
               </div>
@@ -145,6 +148,7 @@ const advisors = [
           <img
             src={`/website-v2/people/${member.image}.png`}
             class="h-28 items-center p-3 lg:h-40"
+            alt={member.name}
           />
           <div class="flex w-full flex-col">
             <div class="flex w-full justify-between px-5 py-3">
@@ -158,6 +162,7 @@ const advisors = [
                   <img
                     src="/website-v2/people/twitter.png"
                     class="m-1 h-8 rounded-xl bg-white lg:h-10"
+                    alt="Twitter"
                   />
                 </a>
               </div>

diff --git a/src/components/home/Testimonial.astro b/src/components/home/Testimonial.astro
@@ -1,23 +1,33 @@
+---
+import { Image } from "astro:assets";
+import bitcoin from "../../assets/testimonial/bitcoin.png";
+import person1 from "../../assets/testimonial/person1.png";
+import person2 from "../../assets/testimonial/goku.png";
+---
+
 <div class="mb-10 mt-10">
   <div class="inline lg:hidden">
     <div class="flex">
       <div class="mr-2">
-        <img
-          src="/website-v2/testimonial/bitcoin.png"
+        <Image
+          src={bitcoin}
           class="max-h-96"
+          alt="Image of Bitcoin"
         />
       </div>
       <div class="flex flex-col">
         <div class="mb-4">
-          <img
-            src="/website-v2/testimonial/person1.png"
+          <Image
+            src={person1}
             class="max-h-44"
+            alt="Person 1"
           />
         </div>
         <div>
-          <img
-            src="/website-v2/testimonial/goku.png"
+          <Image
+            src={person2}
             class="max-h-44"
+            alt="Person 2"
           />
         </div>
       </div>
@@ -27,22 +37,25 @@
 <div class="flex">
   <div class="hidden lg:flex">
     <div class="mr-8">
-      <img
-        src="/website-v2/testimonial/bitcoin.png"
+      <Image
+        src={bitcoin}
         class="min-h-96"
+        alt="Image of Bitcoin"
       />
     </div>
     <div class="flex flex-col">
       <div>
-        <img
-          src="/website-v2/testimonial/person1.png"
+        <Image
+          src={person1}
           class="min-h-96 mb-8"
+          alt="Person 1"
         />
       </div>
       <div>
-        <img
-          src="/website-v2/testimonial/goku.png"
+        <Image
+          src={person2}
           class="min-h-96"
+          alt="Person 2"
         />
       </div>
     </div>
@@ -96,7 +109,7 @@
   </p>
   <div
     style={{
-      backgroundImage: `url(/website-v2/testimonial/background.png)`,
+      backgroundImage: `url(/website-v2/testimonial/background.webp)`,
       backgroundSize: "cover",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "center",

diff --git a/src/components/talks/VideoCard.astro b/src/components/talks/VideoCard.astro
@@ -10,7 +10,7 @@ const { video } = Astro.props as {
   href={video.link}
   target="_blank"
 >
-  <img class="w-full" src={video.img} />
+  <img class="w-full" src={video.img} alt={video.title} />
   <div
     class="mt-2 w-full text-ellipsis font-bold lg:text-xl"
   >

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import Header from "../components/common/Header.astro";
   <Header
     heading=""
     subheading=""
-    image="/website-v2/home/headerbg.png"
+    image="/website-v2/home/headerbg.webp"
     headingColor=""
     subheadingColor=""
   >