perf: ⚡️ serve avif imgs (category and product where possible) (#34)

src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte

@@ -7,6 +7,7 @@
   import { getImageFilename } from "$lib/utils/getImageFilename";
 
   import type { Product } from "$lib/types/product";
+  import { isAvifSupported } from "$lib/stores/isAvifSupported";
 
   export let product: Product;
   export let productDescription: string;
@@ -26,15 +27,17 @@
   const createImgArr = (product: Product): { src: string; alt: string }[] =>
     product?.ProductImages?.length
       ? product.ProductImages.map((img, idx) => ({
-          src: `${PUBLIC_BUCKET_URL}/${getImageFilename(img.ImageUrl)}`,
+          src: `${PUBLIC_BUCKET_URL}/${getImageFilename(img.ImageUrl)}${
+            isAvifSupported ? "-avif" : ""
+          }`,
           alt: `${product.Name} image ${idx + 1}`,
         }))
       : [
           {
             src: product?.ProductImages[0]?.ImageUrl
               ? `${PUBLIC_BUCKET_URL}/${getImageFilename(
                   product.ProductImages[0].ImageUrl
-                )}`
+                )}${isAvifSupported ? "-avif" : ""}`
               : "/coming-soon.png",
             alt: `${product.Name} image 1`,
           },

src/lib/components/Hex/Hex.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { fade } from "svelte/transition";
-  import { lazy } from "$lib/utils/lazyAction";
 
   import type { Category } from "$lib/types/category";
   import type { Tag } from "$lib/types/tag";
+  import { isAvifSupported } from "$lib/stores/isAvifSupported";
 
   export let hexHref = "";
   export let isEmpty = false;
@@ -17,6 +17,7 @@
     Description: "",
   };
   export let loaded: Map<string, HTMLImageElement> = new Map();
+  let imgError = false;
 </script>
 
 <div class="hex-in">
@@ -36,16 +37,25 @@
       href={hexHref}
     >
       {#key loaded}
-        <img
-          in:fade={{ duration: 700, delay: 200 }}
-          src="/grey_square.png"
-          use:lazy={{
-            src: `${PUBLIC_BUCKET_URL}/${category.Description}`,
-            loaded,
-          }}
-          alt={`category ${category.Name}`}
-          data-testid="cdn-img"
-        />
+        {#if imgError}
+          <img
+            in:fade={{ duration: 700, delay: 200 }}
+            src="grey_square.png"
+            on:error={() => (imgError = true)}
+            alt={`category ${category.Name}`}
+            data-testid="cdn-img"
+          />
+        {:else}
+          <img
+            in:fade={{ duration: 700, delay: 200 }}
+            src={`${PUBLIC_BUCKET_URL}/${category.Description}${
+              isAvifSupported ? "-avif" : ""
+            }`}
+            on:error={() => (imgError = true)}
+            alt={`category ${category.Name}`}
+            data-testid="cdn-img"
+          />
+        {/if}
         <img
           in:fade={{ duration: 500 }}
           src={`${PUBLIC_BUCKET_URL}/hex_${Math.floor(

src/lib/components/ProductView/ProductView.svelte

@@ -6,7 +6,6 @@
   import { groupBy } from "lodash-es";
   import Banner from "$lib/components/Banner/Banner.svelte";
   import SingleProduct from "$lib/components/SingleProduct/SingleProduct.svelte";
-  import { getImageFilename } from "$lib/utils/getImageFilename";
 
   import type { Category } from "$lib/types/category";
   import type { Product } from "$lib/types/product";
@@ -112,7 +111,7 @@
 
   $: variantCategoryIds = variantCategories.map((cat) => cat.Id);
 
-  $: if (productArr.length) {
+  $: if (productArr?.length) {
     variantArr = productArr
       ?.filter(({ VariantGroupId }) => !!VariantGroupId)
       ?.filter((prod: Product) => prod.SellOnWeb && !prod.IsArchived);
@@ -169,7 +168,7 @@
 </script>
 
 <svelte:window bind:outerWidth />
-{#if sortedCollatedArray.length}
+{#if sortedCollatedArray?.length}
   <div class="container" data-testid="product-view-container">
     <Banner hasProducts />
     <div class="sort-container">

src/lib/components/SingleProduct/SingleProduct.svelte

@@ -2,6 +2,7 @@
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import ImageLoader from "$lib/components/Image/ImageLoader.svelte";
   import DetailedSingleProduct from "$lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte";
+  import { isAvifSupported } from "$lib/stores/isAvifSupported";
 
   import type { Product } from "$lib/types/product";
   import type { Category } from "$lib/types/category";
@@ -30,7 +31,9 @@
   >
     <div class="position-img">
       <ImageLoader
-        src={`${PUBLIC_BUCKET_URL}/${variantCategory.Description}`}
+        src={`${PUBLIC_BUCKET_URL}/${variantCategory.Description}${
+          isAvifSupported ? "-avif" : ""
+        }`}
         alt={`${variantCategory.Name}`}
       />
     </div>
@@ -71,7 +74,7 @@
           src={product?.ProductImages[0]?.ImageUrl
             ? `${PUBLIC_BUCKET_URL}/${getImageFilename(
                 product.ProductImages[0].ImageUrl
-              )}`
+              )}${isAvifSupported ? "-avif" : ""}`
             : "/coming-soon.png"}
           alt={`${product.Name}`}
         />

src/lib/components/SingleProduct/SingleProduct.test.ts

@@ -78,11 +78,11 @@ describe("Given SingleProduct", () => {
       expect(multiImages).toHaveLength(2);
       expect(multiImages[0]).toHaveAttribute(
         "src",
-        "https://storage.googleapis.com/enki-website/foobar-0"
+        "https://storage.googleapis.com/enki-website/foobar-0-avif"
       );
       expect(multiImages[1]).toHaveAttribute(
         "src",
-        "https://storage.googleapis.com/enki-website/foobar-1"
+        "https://storage.googleapis.com/enki-website/foobar-1-avif"
       );
       expect(
         screen.getByRole("button", { name: "Add to Basket" })

src/lib/stores/isAvifSupported.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const isAvifSupported = writable<boolean>(null);

src/routes/+layout.svelte

@@ -4,7 +4,17 @@
   import Header from "$lib/components/Header/Header.svelte";
   import Footer from "$lib/components/Footer/Footer.svelte";
   import BackToTop from "$lib/components/BackToTop/BackToTop.svelte";
+  import { isAvifSupported } from "$lib/stores/isAvifSupported";
   import "../app.css";
+  import { onMount } from "svelte";
+
+  let checkAvif = false;
+
+  onMount(() => {
+    if ($isAvifSupported === null) {
+      checkAvif = true;
+    }
+  });
 </script>
 
 <svelte:head>
@@ -32,8 +42,25 @@
   <BackToTop />
 </div>
 <Footer />
+{#if checkAvif}
+  <img
+    class="avif-supported-check"
+    alt="not visible and is used to check if your browser supports the avif format"
+    src="data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="
+    on:load={() => {
+      isAvifSupported.set(true);
+    }}
+    on:error={() => {
+      isAvifSupported.set(false);
+    }}
+  />
+{/if}
 
 <style>
+  .avif-supported-check {
+    display: none;
+  }
+
   .container {
     min-height: 100vh;
   }