diff --git a/public/index.html b/public/index.html
index de7e95e92..4de2a2615 100644
--- a/public/index.html
+++ b/public/index.html
@@ -253,12 +253,12 @@
           <article class="transformation-panel active" role="tabpanel" data-panel="0">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/dashboard.before.webp" alt="Dashboard before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>
@@ -276,12 +276,12 @@
           <article class="transformation-panel" role="tabpanel" data-panel="1">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/landing.after.webp" alt="Landing page after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>
@@ -299,12 +299,12 @@
           <article class="transformation-panel" role="tabpanel" data-panel="2">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/form.after.webp" alt="Form after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>