Added webp fallback images

index.html

@@ -31,14 +31,10 @@
           href="#top"
           aria-label="Noel Design Atelier, back to top"
         >
-          <img
+          <picture>
-            class="image-fluid"
+            <source class="image-fluid" srcset="images/logo.webp" type="image/webp">
-            src="images/logo.webp"
+            <img class="image-fluid" src="images/logo.png" alt="Noel Design Atelier Logo">
-            width="4167"
+          </picture>
-            height="1063"
-            alt=""
-            decoding="async"
-          >
         </a>
 
         <nav class="grid-trailing-content" aria-label="Primary navigation">
@@ -85,7 +81,10 @@
             role="img"
             aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
           >
-            <img src="images/composing.webp" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns" decoding="async">
+            <picture>
+              <source srcset="images/composing.webp" type="image/webp">
+              <img src="images/composing.jpg" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns">
+            </picture>
           </div>
         </figure>
       </section>
@@ -103,7 +102,10 @@
                 role="img"
                 aria-label="Cedar garland and velvet ribbon following a curved staircase"
               >
-                <img src="images/space.webp" alt="Cedar garland and velvet ribbon following a curved staircase" decoding="async">
+                <picture>
+                  <source srcset="images/space.webp" type="image/webp">
+                  <img src="images/space.jpg" alt="Cedar garland and velvet ribbon following a curved staircase">
+                </picture>
               </div>
             </figure>
 
@@ -176,7 +178,10 @@
                 role="img"
                 aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
               >
-                <img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
+                <picture>
+                  <source srcset="images/by-hand.webp" type="image/webp">
+                  <img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
+                </picture>
               </div>
             </figure>
           </div>
@@ -243,7 +248,10 @@
                 role="img"
                 aria-label="A tall evergreen tree lit with warm lights in a grand room"
               >
-                <img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
+                <picture>
+                  <source srcset="images/gather-1.webp" type="image/webp">
+                  <img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
+                </picture>
               </div>
               <figcaption class="caption-grid">
                 <span class="caption-label label-uppercase">On arrival</span>
@@ -260,7 +268,10 @@
                 role="img"
                 aria-label="A holiday table set with greenery and candles for a small gathering"
               >
-                <img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
+                <picture>
+                  <source srcset="images/gather-2.webp" type="image/webp">
+                  <img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
+                </picture>
               </div>
               <figcaption class="caption-grid">
                 <span class="caption-label label-uppercase">Around the table</span>
@@ -277,7 +288,10 @@
                 role="img"
                 aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
               >
-                <img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
+                <picture>
+                  <source srcset="images/gather-3.webp" type="image/webp">
+                  <img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
+                </picture>
               </div>
               <figcaption class="caption-grid">
                 <span class="caption-label label-uppercase">A closer look</span>
@@ -313,7 +327,10 @@
                 role="img"
                 aria-label="An open doorway framed by cedar garland and warm lights"
               >
-                <img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
+                <picture>
+                  <source srcset="images/welcome.webp" type="image/webp">
+                  <img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
+                </picture>
               </div>
             </figure>
           </div>
@@ -418,15 +435,10 @@
             href="#top"
             aria-label="Noel Design Atelier, back to top"
           >
-            <img
+            <picture>
-              class="image-fluid image-inverted"
+              <source class="image-fluid image-inverted" srcset="images/logo.webp" type="image/webp">
-              src="images/logo.webp"
+              <img class="image-fluid image-inverted" src="images/logo.png" alt="Noel Design Atelier Logo">
-              width="4167"
+            </picture>
-              height="1063"
-              alt=""
-              loading="lazy"
-              decoding="async"
-            >
           </a>
         </div>