refactor: Improvements to image types that are being used to improve …

…loading speed
25Ericcheong · May 18, 2024 · 3cbd179 · 3cbd179
1 parent d3778ba
commit 3cbd179
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/src/assets/images/our-mentions/bingsu-our-mentions.webp b/src/assets/images/our-mentions/bingsu-our-mentions.webp
diff --git a/src/components/about-us.vue b/src/components/about-us.vue
@@ -6,11 +6,17 @@ import { getImageUrl } from "@/util/image";
   <div
     class="bg-creamyellowbq flex flex-col lg:flex-row h-full py-32 lg:py-72 px-12 sm:px-14 md:px-20"
   >
-    <img
-      class="w-full h-full lg:w-1/2"
-      :src="getImageUrl('bingsu-about-us', 'about-us')"
-      alt="Owner carrying a tray containing a typical bingsu set at Binq"
-    />
+    <picture class="w-full lg:w-3/4">
+      <source
+        :srcset="getImageUrl('bingsu-about-us', 'about-us', undefined, true)"
+        type="image/webp"
+      />
+      <img
+        class="w-full h-full"
+        :src="getImageUrl('bingsu-about-us', 'about-us')"
+        alt="Owner carrying a tray containing a typical bingsu set at Binq"
+      />
+    </picture>
     <div
       class="flex flex-col justify-center items-center pt-10 lg:pt-0 pl-0 lg:pl-32 text-darkorangebq"
     >

diff --git a/src/components/our-mentions.vue b/src/components/our-mentions.vue
@@ -86,11 +86,19 @@ onMounted(() => {
           , we are proud to highlight some here
         </h2>
       </div>
-      <img
-        class="h-fit w-full lg:w-3/4 p-0 lg:pl-40"
-        :src="getImageUrl('bingsu-our-mentions', 'our-mentions')"
-        alt="A blurred background containing the owners of Binq and a tray of Bingsu on the main counter in the store"
-      />
+      <picture class="ml-0 lg:ml-40 w-full lg:w-[50%]">
+        <source
+          :srcset="
+            getImageUrl('bingsu-our-mentions', 'our-mentions', undefined, true)
+          "
+          type="image/webp"
+        />
+        <img
+          class="h-fit p-0"
+          :src="getImageUrl('bingsu-our-mentions', 'our-mentions')"
+          alt="A blurred background containing the owners of Binq and a tray of Bingsu on the main counter in the store"
+        />
+      </picture>
     </section>
     <section
       class="flex flex-col md:flex-row md:justify-between pt-40 pb-56 font-medium"

diff --git a/src/util/image.ts b/src/util/image.ts
@@ -2,24 +2,39 @@
 export function getImageUrl(
   imageName: string,
   outerDir: string,
-  innerDir?: string
+  innerDir?: string,
+  isWebp: boolean = false
 ) {
+  let extension = "jpg";
+  if (isWebp) {
+    extension = "webp";
+  }
+
   if (innerDir === undefined) {
     return new URL(
-      `/src/assets/images/${outerDir}/${imageName}.jpg`,
+      `/src/assets/images/${outerDir}/${imageName}.${extension}`,
       import.meta.url
     ).href;
   }
 
   return new URL(
-    `/src/assets/images/${outerDir}/${innerDir}/${imageName}.jpg`,
+    `/src/assets/images/${outerDir}/${innerDir}/${imageName}.${extension}`,
     import.meta.url
   ).href;
 }
 
-export function getImageUrlForMenu(imageName: string, outerDir: string) {
+export function getImageUrlForMenu(
+  imageName: string,
+  outerDir: string,
+  isWebp: boolean = false
+) {
+  let extension = "jpg";
+  if (isWebp) {
+    extension = "webp";
+  }
+
   return new URL(
-    `/src/assets/images/menu/${outerDir}/${imageName}.jpg`,
+    `/src/assets/images/menu/${outerDir}/${imageName}.${extension}`,
     import.meta.url
   ).href;
 }