diff --git a/images/by-hand.jpg b/images/by-hand.jpg
new file mode 100644
index 0000000..b18a8e9
Binary files /dev/null and b/images/by-hand.jpg differ
diff --git a/images/composing.jpg b/images/composing.jpg
new file mode 100644
index 0000000..0f79c74
Binary files /dev/null and b/images/composing.jpg differ
diff --git a/images/gather-1.jpg b/images/gather-1.jpg
new file mode 100644
index 0000000..e767a33
Binary files /dev/null and b/images/gather-1.jpg differ
diff --git a/images/gather-2.jpg b/images/gather-2.jpg
new file mode 100644
index 0000000..d283b71
Binary files /dev/null and b/images/gather-2.jpg differ
diff --git a/images/gather-3.jpg b/images/gather-3.jpg
new file mode 100644
index 0000000..bc6f393
Binary files /dev/null and b/images/gather-3.jpg differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..5a1d86b
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/space.jpg b/images/space.jpg
new file mode 100644
index 0000000..0ee6b18
Binary files /dev/null and b/images/space.jpg differ
diff --git a/images/welcome.jpg b/images/welcome.jpg
new file mode 100644
index 0000000..add88e8
Binary files /dev/null and b/images/welcome.jpg differ
diff --git a/index.html b/index.html
index 88d6f00..2044365 100644
--- a/index.html
+++ b/index.html
@@ -31,14 +31,10 @@
           href="#top"
           aria-label="Noel Design Atelier, back to top"
         >
-          <img
-            class="image-fluid"
-            src="images/logo.webp"
-            width="4167"
-            height="1063"
-            alt=""
-            decoding="async"
-          >
+          <picture>
+            <source class="image-fluid" srcset="images/logo.webp" type="image/webp">
+            <img class="image-fluid" src="images/logo.png" alt="Noel Design Atelier Logo">
+          </picture>
         </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
-              class="image-fluid image-inverted"
-              src="images/logo.webp"
-              width="4167"
-              height="1063"
-              alt=""
-              loading="lazy"
-              decoding="async"
-            >
+            <picture>
+              <source class="image-fluid image-inverted" srcset="images/logo.webp" type="image/webp">
+              <img class="image-fluid image-inverted" src="images/logo.png" alt="Noel Design Atelier Logo">
+            </picture>
           </a>
         </div>