diff --git a/TODO.md b/TODO.md
index 2447b0f..4069d2a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,7 +20,7 @@ Last updated: 2026-09-10.
 
 ## Content
 
-- [ ] Refine any copy that reads wrong, page by page.
+- [x] Refine any copy that reads wrong, page by page.
 - [ ] Populate the galleries with more or real work items.
 - [ ] Add per-image captions (they are category-level only right now).
 
@@ -30,8 +30,10 @@ Last updated: 2026-09-10.
   find or shoot a better crop.
 - [ ] Consider moving `writtenearplugs.jpg` from the Urban Moto grid into the
   Print gallery.
-- [ ] Optimise images to WebP: `img/` is 20 MB of the 21 MB repo.
-- [ ] Confirm the Forgejo repo (`2RE03-Design`) is private.
+- [x] Optimise images to WebP: `img/` was 20 MB of the 21 MB repo. Done: 45 images
+  converted (long side capped at 1600px, q82, or q90 with lossless alpha), `img/`
+  is now 3.2 MB. `printtiresad.png` stayed PNG because WebP came out larger.
+- [x] Confirm the Forgejo repo (`2RE03-Design`) is private.
 
 ## Done
 
diff --git a/case-studies.html b/case-studies.html
index c97cfe2..00bf458 100644
--- a/case-studies.html
+++ b/case-studies.html
@@ -48,57 +48,57 @@
       <div class="container">
         <ul class="case-list">
           <li class="case-item">
-            <a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.jpg">
-              <img class="case-row__thumb" src="img/site-mask-aid-project.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.webp">
+              <img class="case-row__thumb" src="img/site-mask-aid-project.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Mask Aid Project</span>
               <span class="case-row__meta">Web Design</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.jpg">
-              <img class="case-row__thumb" src="img/site-one-womans-art-and-magic.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.webp">
+              <img class="case-row__thumb" src="img/site-one-womans-art-and-magic.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">1 Woman's Art and Magic</span>
               <span class="case-row__meta">Book Design &amp; Web</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.png">
-              <img class="case-row__thumb" src="img/writtensamsrules.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.webp">
+              <img class="case-row__thumb" src="img/writtensamsrules.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Sam's Rules</span>
               <span class="case-row__meta">Book Design &amp; Web</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.png">
-              <img class="case-row__thumb" src="img/webmehavior.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.webp">
+              <img class="case-row__thumb" src="img/webmehavior.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Mehavior</span>
               <span class="case-row__meta">App Design &amp; Identity</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.jpg">
-              <img class="case-row__thumb" src="img/site-jensens-red-barn.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.webp">
+              <img class="case-row__thumb" src="img/site-jensens-red-barn.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Jensen's Red Barn</span>
               <span class="case-row__meta">Web Design</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.png">
-              <img class="case-row__thumb" src="img/3dcart.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.webp">
+              <img class="case-row__thumb" src="img/3dcart.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Upscale Food Cart</span>
               <span class="case-row__meta">3D Modeling</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.png">
-              <img class="case-row__thumb" src="img/logosilverlining.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.webp">
+              <img class="case-row__thumb" src="img/logosilverlining.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Silver Lining</span>
               <span class="case-row__meta">Logo &amp; Identity</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.png">
-              <img class="case-row__thumb" src="img/webvictoria.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.webp">
+              <img class="case-row__thumb" src="img/webvictoria.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Victoria Fuller</span>
               <span class="case-row__meta">Web Design</span>
             </a>
@@ -111,8 +111,8 @@
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.jpg">
-              <img class="case-row__thumb" src="img/site-teach-each-other-ai.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.webp">
+              <img class="case-row__thumb" src="img/site-teach-each-other-ai.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Teach Each Other AI</span>
               <span class="case-row__meta">Web Design</span>
             </a>
diff --git a/case-studies/jensens-red-barn.html b/case-studies/jensens-red-barn.html
index e8f3ef3..5b267bd 100644
--- a/case-studies/jensens-red-barn.html
+++ b/case-studies/jensens-red-barn.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-jensens-red-barn.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-jensens-red-barn.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
         <h1>Jensen's Red Barn</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/site-jensens-red-barn.jpg" alt="Jensen's Red Barn homepage" width="1200" height="900">
+              <img src="../img/site-jensens-red-barn.webp" alt="Jensen's Red Barn homepage" width="1200" height="900">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/mask-aid-project.html b/case-studies/mask-aid-project.html
index fd0395f..72ad2cd 100644
--- a/case-studies/mask-aid-project.html
+++ b/case-studies/mask-aid-project.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mask-aid-project.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mask-aid-project.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
         <h1>Mask Aid Project</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/site-mask-aid-project.jpg" alt="Mask Aid Project homepage" width="1200" height="900">
+              <img src="../img/site-mask-aid-project.webp" alt="Mask Aid Project homepage" width="1200" height="900">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/mehavior.html b/case-studies/mehavior.html
index 6cc61a9..3f0d246 100644
--- a/case-studies/mehavior.html
+++ b/case-studies/mehavior.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mehavior.jpg'); --hero-position: center top">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mehavior.webp'); --hero-position: center top">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; App Design &amp; Identity</p>
         <h1>Mehavior</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/webmehavior.png" alt="Mehavior app interface design" width="1000" height="800">
+              <img src="../img/webmehavior.webp" alt="Mehavior app interface design" width="1000" height="800">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/one-womans-art-and-magic.html b/case-studies/one-womans-art-and-magic.html
index c0e9dab..b39a7ac 100644
--- a/case-studies/one-womans-art-and-magic.html
+++ b/case-studies/one-womans-art-and-magic.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-one-womans-art-and-magic.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-one-womans-art-and-magic.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Book Design &amp; Web</p>
         <h1>1 Woman's Art and Magic</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/site-one-womans-art-and-magic.jpg" alt="1 Woman's Art and Magic homepage" width="1200" height="900">
+              <img src="../img/site-one-womans-art-and-magic.webp" alt="1 Woman's Art and Magic homepage" width="1200" height="900">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/sams-rules.html b/case-studies/sams-rules.html
index cacb6e2..a655a5d 100644
--- a/case-studies/sams-rules.html
+++ b/case-studies/sams-rules.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-sams-rules.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-sams-rules.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Book Design &amp; Web</p>
         <h1>Sam's Rules</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/writtensamsrules.png" alt="Sam's Rules book layout, design, and editing project" width="2048" height="2048">
+              <img src="../img/writtensamsrules.webp" alt="Sam's Rules book layout, design, and editing project" width="1600" height="1600">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/silver-lining.html b/case-studies/silver-lining.html
index 3238eeb..5db6354 100644
--- a/case-studies/silver-lining.html
+++ b/case-studies/silver-lining.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-silver-lining.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-silver-lining.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Logo &amp; Identity</p>
         <h1>Silver Lining</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/logosilverlining.png" alt="Silver Lining logo and identity project" width="1854" height="996">
+              <img src="../img/logosilverlining.webp" alt="Silver Lining logo and identity project" width="1600" height="860">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/teach-each-other-ai.html b/case-studies/teach-each-other-ai.html
index 1f03795..74a8bdf 100644
--- a/case-studies/teach-each-other-ai.html
+++ b/case-studies/teach-each-other-ai.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-teach-each-other-ai.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-teach-each-other-ai.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
         <h1>Teach Each Other AI</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/site-teach-each-other-ai.jpg" alt="Teach Each Other AI homepage" width="1200" height="900">
+              <img src="../img/site-teach-each-other-ai.webp" alt="Teach Each Other AI homepage" width="1200" height="900">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/upscale-food-cart.html b/case-studies/upscale-food-cart.html
index e3d2ead..dad5037 100644
--- a/case-studies/upscale-food-cart.html
+++ b/case-studies/upscale-food-cart.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-upscale-food-cart.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-upscale-food-cart.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; 3D Modeling</p>
         <h1>Upscale Food Cart</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/3dcart.png" alt="Upscale Food Cart 3D design proposal" width="1024" height="754">
+              <img src="../img/3dcart.webp" alt="Upscale Food Cart 3D design proposal" width="1024" height="754">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/case-studies/urban-moto.html b/case-studies/urban-moto.html
index 13343e3..55611f5 100644
--- a/case-studies/urban-moto.html
+++ b/case-studies/urban-moto.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-urban-moto.jpg')">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-urban-moto.webp')">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Print Design</p>
         <h1>Urban Moto</h1>
@@ -54,17 +54,17 @@
               </div>
               <div class="col">
                 <figure class="card-work card-work--frame mb-0">
-                  <img src="../img/printkincaidad.jpg" alt="Urban Moto print advertisement" width="800" height="600">
+                  <img src="../img/printkincaidad.webp" alt="Urban Moto print advertisement" width="800" height="600">
                 </figure>
               </div>
               <div class="col">
                 <figure class="card-work card-work--frame mb-0">
-                  <img src="../img/printmacchiariniad.png" alt="Urban Moto print advertisement" width="800" height="600">
+                  <img src="../img/printmacchiariniad.webp" alt="Urban Moto print advertisement" width="800" height="600">
                 </figure>
               </div>
               <div class="col">
                 <figure class="card-work card-work--frame mb-0">
-                  <img src="../img/writtenearplugs.jpg" alt="Urban Moto print advertisement" width="800" height="600">
+                  <img src="../img/writtenearplugs.webp" alt="Urban Moto print advertisement" width="800" height="600">
                 </figure>
               </div>
             </div>
diff --git a/case-studies/victoria-fuller.html b/case-studies/victoria-fuller.html
index fb32366..f40b236 100644
--- a/case-studies/victoria-fuller.html
+++ b/case-studies/victoria-fuller.html
@@ -34,7 +34,7 @@
   </header>
 
   <main id="main">
-    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-victoria-fuller.jpg'); --hero-position: center 10%">
+    <section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-victoria-fuller.webp'); --hero-position: center 10%">
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
         <h1>Victoria Fuller</h1>
@@ -47,7 +47,7 @@
         <div class="row g-4 g-lg-5">
           <div class="col-lg-7">
             <figure class="card-work mb-0">
-              <img src="../img/webvictoria.png" alt="Victoria Fuller web design project" width="2060" height="1266">
+              <img src="../img/webvictoria.webp" alt="Victoria Fuller web design project" width="1600" height="983">
             </figure>
           </div>
           <div class="col-lg-5">
diff --git a/img/2plus5times3.jpg b/img/2plus5times3.jpg
deleted file mode 100644
index 011cc79..0000000
Binary files a/img/2plus5times3.jpg and /dev/null differ
diff --git a/img/2plus5times3.webp b/img/2plus5times3.webp
new file mode 100644
index 0000000..20e5ddc
Binary files /dev/null and b/img/2plus5times3.webp differ
diff --git a/img/3d78williams.jpg b/img/3d78williams.jpg
deleted file mode 100755
index 13b3aa1..0000000
Binary files a/img/3d78williams.jpg and /dev/null differ
diff --git a/img/3d78williams.webp b/img/3d78williams.webp
new file mode 100644
index 0000000..9edd98d
Binary files /dev/null and b/img/3d78williams.webp differ
diff --git a/img/3dabandoned.jpg b/img/3dabandoned.jpg
deleted file mode 100755
index 47add4b..0000000
Binary files a/img/3dabandoned.jpg and /dev/null differ
diff --git a/img/3dabandoned.webp b/img/3dabandoned.webp
new file mode 100644
index 0000000..e2bd96f
Binary files /dev/null and b/img/3dabandoned.webp differ
diff --git a/img/3dcart.png b/img/3dcart.png
deleted file mode 100755
index ccab98b..0000000
Binary files a/img/3dcart.png and /dev/null differ
diff --git a/img/3dcart.webp b/img/3dcart.webp
new file mode 100644
index 0000000..ec26d62
Binary files /dev/null and b/img/3dcart.webp differ
diff --git a/img/3dcoop.jpg b/img/3dcoop.jpg
deleted file mode 100755
index 2b9c874..0000000
Binary files a/img/3dcoop.jpg and /dev/null differ
diff --git a/img/3dcoop.webp b/img/3dcoop.webp
new file mode 100644
index 0000000..5f9816c
Binary files /dev/null and b/img/3dcoop.webp differ
diff --git a/img/collage-1.jpg b/img/collage-1.jpg
deleted file mode 100644
index d786b4a..0000000
Binary files a/img/collage-1.jpg and /dev/null differ
diff --git a/img/collage-1.webp b/img/collage-1.webp
new file mode 100644
index 0000000..27512bd
Binary files /dev/null and b/img/collage-1.webp differ
diff --git a/img/collage-2.jpg b/img/collage-2.jpg
deleted file mode 100644
index 57241e7..0000000
Binary files a/img/collage-2.jpg and /dev/null differ
diff --git a/img/collage-2.webp b/img/collage-2.webp
new file mode 100644
index 0000000..00ac181
Binary files /dev/null and b/img/collage-2.webp differ
diff --git a/img/collage-3.jpg b/img/collage-3.jpg
deleted file mode 100644
index 4183c79..0000000
Binary files a/img/collage-3.jpg and /dev/null differ
diff --git a/img/collage-3.webp b/img/collage-3.webp
new file mode 100644
index 0000000..619954e
Binary files /dev/null and b/img/collage-3.webp differ
diff --git a/img/collage-4.jpg b/img/collage-4.jpg
deleted file mode 100644
index da4c0c7..0000000
Binary files a/img/collage-4.jpg and /dev/null differ
diff --git a/img/collage-4.webp b/img/collage-4.webp
new file mode 100644
index 0000000..136658e
Binary files /dev/null and b/img/collage-4.webp differ
diff --git a/img/collage-5.jpg b/img/collage-5.jpg
deleted file mode 100644
index 041569e..0000000
Binary files a/img/collage-5.jpg and /dev/null differ
diff --git a/img/collage-5.webp b/img/collage-5.webp
new file mode 100644
index 0000000..9c86b0d
Binary files /dev/null and b/img/collage-5.webp differ
diff --git a/img/collage-6.jpg b/img/collage-6.jpg
deleted file mode 100644
index 741c313..0000000
Binary files a/img/collage-6.jpg and /dev/null differ
diff --git a/img/collage-6.webp b/img/collage-6.webp
new file mode 100644
index 0000000..4f62c2e
Binary files /dev/null and b/img/collage-6.webp differ
diff --git a/img/collage-7.jpg b/img/collage-7.jpg
deleted file mode 100644
index fd23917..0000000
Binary files a/img/collage-7.jpg and /dev/null differ
diff --git a/img/collage-7.webp b/img/collage-7.webp
new file mode 100644
index 0000000..6b9b27e
Binary files /dev/null and b/img/collage-7.webp differ
diff --git a/img/collage-8.jpg b/img/collage-8.jpg
deleted file mode 100644
index 5a1fbc4..0000000
Binary files a/img/collage-8.jpg and /dev/null differ
diff --git a/img/collage-8.webp b/img/collage-8.webp
new file mode 100644
index 0000000..c7d90ea
Binary files /dev/null and b/img/collage-8.webp differ
diff --git a/img/hero-jensens-red-barn.jpg b/img/hero-jensens-red-barn.jpg
deleted file mode 100644
index 32aa576..0000000
Binary files a/img/hero-jensens-red-barn.jpg and /dev/null differ
diff --git a/img/hero-jensens-red-barn.webp b/img/hero-jensens-red-barn.webp
new file mode 100644
index 0000000..123054c
Binary files /dev/null and b/img/hero-jensens-red-barn.webp differ
diff --git a/img/hero-mask-aid-project.jpg b/img/hero-mask-aid-project.jpg
deleted file mode 100644
index 64571ae..0000000
Binary files a/img/hero-mask-aid-project.jpg and /dev/null differ
diff --git a/img/hero-mask-aid-project.webp b/img/hero-mask-aid-project.webp
new file mode 100644
index 0000000..85877f7
Binary files /dev/null and b/img/hero-mask-aid-project.webp differ
diff --git a/img/hero-mehavior.jpg b/img/hero-mehavior.jpg
deleted file mode 100644
index 654ab40..0000000
Binary files a/img/hero-mehavior.jpg and /dev/null differ
diff --git a/img/hero-mehavior.webp b/img/hero-mehavior.webp
new file mode 100644
index 0000000..1e99c11
Binary files /dev/null and b/img/hero-mehavior.webp differ
diff --git a/img/hero-one-womans-art-and-magic.jpg b/img/hero-one-womans-art-and-magic.jpg
deleted file mode 100644
index a9a5d61..0000000
Binary files a/img/hero-one-womans-art-and-magic.jpg and /dev/null differ
diff --git a/img/hero-one-womans-art-and-magic.webp b/img/hero-one-womans-art-and-magic.webp
new file mode 100644
index 0000000..cf8ffe7
Binary files /dev/null and b/img/hero-one-womans-art-and-magic.webp differ
diff --git a/img/hero-sams-rules.jpg b/img/hero-sams-rules.jpg
deleted file mode 100644
index f9863d1..0000000
Binary files a/img/hero-sams-rules.jpg and /dev/null differ
diff --git a/img/hero-sams-rules.webp b/img/hero-sams-rules.webp
new file mode 100644
index 0000000..4312273
Binary files /dev/null and b/img/hero-sams-rules.webp differ
diff --git a/img/hero-silver-lining.jpg b/img/hero-silver-lining.jpg
deleted file mode 100644
index 1ae67d4..0000000
Binary files a/img/hero-silver-lining.jpg and /dev/null differ
diff --git a/img/hero-silver-lining.webp b/img/hero-silver-lining.webp
new file mode 100644
index 0000000..f797008
Binary files /dev/null and b/img/hero-silver-lining.webp differ
diff --git a/img/hero-teach-each-other-ai.jpg b/img/hero-teach-each-other-ai.jpg
deleted file mode 100644
index 1b07e4f..0000000
Binary files a/img/hero-teach-each-other-ai.jpg and /dev/null differ
diff --git a/img/hero-teach-each-other-ai.webp b/img/hero-teach-each-other-ai.webp
new file mode 100644
index 0000000..43e2ea1
Binary files /dev/null and b/img/hero-teach-each-other-ai.webp differ
diff --git a/img/hero-upscale-food-cart.jpg b/img/hero-upscale-food-cart.jpg
deleted file mode 100644
index 2fcf8ab..0000000
Binary files a/img/hero-upscale-food-cart.jpg and /dev/null differ
diff --git a/img/hero-upscale-food-cart.webp b/img/hero-upscale-food-cart.webp
new file mode 100644
index 0000000..5584893
Binary files /dev/null and b/img/hero-upscale-food-cart.webp differ
diff --git a/img/hero-urban-moto.jpg b/img/hero-urban-moto.jpg
deleted file mode 100644
index 76869bd..0000000
Binary files a/img/hero-urban-moto.jpg and /dev/null differ
diff --git a/img/hero-urban-moto.webp b/img/hero-urban-moto.webp
new file mode 100644
index 0000000..5e626c0
Binary files /dev/null and b/img/hero-urban-moto.webp differ
diff --git a/img/hero-victoria-fuller.jpg b/img/hero-victoria-fuller.jpg
deleted file mode 100644
index 174d362..0000000
Binary files a/img/hero-victoria-fuller.jpg and /dev/null differ
diff --git a/img/hero-victoria-fuller.webp b/img/hero-victoria-fuller.webp
new file mode 100644
index 0000000..0566c06
Binary files /dev/null and b/img/hero-victoria-fuller.webp differ
diff --git a/img/logoargent.png b/img/logoargent.png
deleted file mode 100755
index 6cacc41..0000000
Binary files a/img/logoargent.png and /dev/null differ
diff --git a/img/logoargent.webp b/img/logoargent.webp
new file mode 100644
index 0000000..e2f290e
Binary files /dev/null and b/img/logoargent.webp differ
diff --git a/img/logobackass.png b/img/logobackass.png
deleted file mode 100755
index fafd08b..0000000
Binary files a/img/logobackass.png and /dev/null differ
diff --git a/img/logobackass.webp b/img/logobackass.webp
new file mode 100644
index 0000000..1985b78
Binary files /dev/null and b/img/logobackass.webp differ
diff --git a/img/logodrinking.png b/img/logodrinking.png
deleted file mode 100755
index 93f9852..0000000
Binary files a/img/logodrinking.png and /dev/null differ
diff --git a/img/logodrinking.webp b/img/logodrinking.webp
new file mode 100644
index 0000000..cba35c1
Binary files /dev/null and b/img/logodrinking.webp differ
diff --git a/img/logodrive.png b/img/logodrive.png
deleted file mode 100755
index 8af45a5..0000000
Binary files a/img/logodrive.png and /dev/null differ
diff --git a/img/logodrive.webp b/img/logodrive.webp
new file mode 100644
index 0000000..36a7d50
Binary files /dev/null and b/img/logodrive.webp differ
diff --git a/img/logosilverlining.png b/img/logosilverlining.png
deleted file mode 100755
index 3285c59..0000000
Binary files a/img/logosilverlining.png and /dev/null differ
diff --git a/img/logosilverlining.webp b/img/logosilverlining.webp
new file mode 100644
index 0000000..f549d34
Binary files /dev/null and b/img/logosilverlining.webp differ
diff --git a/img/logoylem.png b/img/logoylem.png
deleted file mode 100755
index aca2236..0000000
Binary files a/img/logoylem.png and /dev/null differ
diff --git a/img/logoylem.webp b/img/logoylem.webp
new file mode 100644
index 0000000..66a6639
Binary files /dev/null and b/img/logoylem.webp differ
diff --git a/img/printkincaidad.jpg b/img/printkincaidad.jpg
deleted file mode 100755
index b9366da..0000000
Binary files a/img/printkincaidad.jpg and /dev/null differ
diff --git a/img/printkincaidad.webp b/img/printkincaidad.webp
new file mode 100644
index 0000000..efae5f2
Binary files /dev/null and b/img/printkincaidad.webp differ
diff --git a/img/printmacchiariniad.png b/img/printmacchiariniad.png
deleted file mode 100755
index 23a517b..0000000
Binary files a/img/printmacchiariniad.png and /dev/null differ
diff --git a/img/printmacchiariniad.webp b/img/printmacchiariniad.webp
new file mode 100644
index 0000000..419fd30
Binary files /dev/null and b/img/printmacchiariniad.webp differ
diff --git a/img/printylemcover.png b/img/printylemcover.png
deleted file mode 100755
index 790e98d..0000000
Binary files a/img/printylemcover.png and /dev/null differ
diff --git a/img/printylemcover.webp b/img/printylemcover.webp
new file mode 100644
index 0000000..d3bf954
Binary files /dev/null and b/img/printylemcover.webp differ
diff --git a/img/site-cool-crap-from-china.jpg b/img/site-cool-crap-from-china.jpg
deleted file mode 100644
index 08a217c..0000000
Binary files a/img/site-cool-crap-from-china.jpg and /dev/null differ
diff --git a/img/site-cool-crap-from-china.webp b/img/site-cool-crap-from-china.webp
new file mode 100644
index 0000000..9907bd7
Binary files /dev/null and b/img/site-cool-crap-from-china.webp differ
diff --git a/img/site-jensens-red-barn.jpg b/img/site-jensens-red-barn.jpg
deleted file mode 100644
index b5f9f11..0000000
Binary files a/img/site-jensens-red-barn.jpg and /dev/null differ
diff --git a/img/site-jensens-red-barn.webp b/img/site-jensens-red-barn.webp
new file mode 100644
index 0000000..784cbf9
Binary files /dev/null and b/img/site-jensens-red-barn.webp differ
diff --git a/img/site-mask-aid-project.jpg b/img/site-mask-aid-project.jpg
deleted file mode 100644
index b83d0f4..0000000
Binary files a/img/site-mask-aid-project.jpg and /dev/null differ
diff --git a/img/site-mask-aid-project.webp b/img/site-mask-aid-project.webp
new file mode 100644
index 0000000..b7409c7
Binary files /dev/null and b/img/site-mask-aid-project.webp differ
diff --git a/img/site-one-womans-art-and-magic.jpg b/img/site-one-womans-art-and-magic.jpg
deleted file mode 100644
index 00ab209..0000000
Binary files a/img/site-one-womans-art-and-magic.jpg and /dev/null differ
diff --git a/img/site-one-womans-art-and-magic.webp b/img/site-one-womans-art-and-magic.webp
new file mode 100644
index 0000000..65cffb4
Binary files /dev/null and b/img/site-one-womans-art-and-magic.webp differ
diff --git a/img/site-teach-each-other-ai.jpg b/img/site-teach-each-other-ai.jpg
deleted file mode 100644
index 35af997..0000000
Binary files a/img/site-teach-each-other-ai.jpg and /dev/null differ
diff --git a/img/site-teach-each-other-ai.webp b/img/site-teach-each-other-ai.webp
new file mode 100644
index 0000000..aa98395
Binary files /dev/null and b/img/site-teach-each-other-ai.webp differ
diff --git a/img/web50shadesof2048.png b/img/web50shadesof2048.png
deleted file mode 100755
index 3c4fb83..0000000
Binary files a/img/web50shadesof2048.png and /dev/null differ
diff --git a/img/web50shadesof2048.webp b/img/web50shadesof2048.webp
new file mode 100644
index 0000000..fba8d64
Binary files /dev/null and b/img/web50shadesof2048.webp differ
diff --git a/img/webdatavisart.jpeg b/img/webdatavisart.jpeg
deleted file mode 100755
index c31188b..0000000
Binary files a/img/webdatavisart.jpeg and /dev/null differ
diff --git a/img/webdatavisart.webp b/img/webdatavisart.webp
new file mode 100644
index 0000000..2994277
Binary files /dev/null and b/img/webdatavisart.webp differ
diff --git a/img/webmehavior.png b/img/webmehavior.png
deleted file mode 100755
index e3d4790..0000000
Binary files a/img/webmehavior.png and /dev/null differ
diff --git a/img/webmehavior.webp b/img/webmehavior.webp
new file mode 100644
index 0000000..4bde8f9
Binary files /dev/null and b/img/webmehavior.webp differ
diff --git a/img/websinosalescopy.jpg b/img/websinosalescopy.jpg
deleted file mode 100644
index 940499b..0000000
Binary files a/img/websinosalescopy.jpg and /dev/null differ
diff --git a/img/websinosalescopy.webp b/img/websinosalescopy.webp
new file mode 100644
index 0000000..4e1ac86
Binary files /dev/null and b/img/websinosalescopy.webp differ
diff --git a/img/webvictoria.png b/img/webvictoria.png
deleted file mode 100755
index 3a4e881..0000000
Binary files a/img/webvictoria.png and /dev/null differ
diff --git a/img/webvictoria.webp b/img/webvictoria.webp
new file mode 100644
index 0000000..8776d24
Binary files /dev/null and b/img/webvictoria.webp differ
diff --git a/img/writtenearplugs.jpg b/img/writtenearplugs.jpg
deleted file mode 100755
index 0a2be20..0000000
Binary files a/img/writtenearplugs.jpg and /dev/null differ
diff --git a/img/writtenearplugs.webp b/img/writtenearplugs.webp
new file mode 100644
index 0000000..2b6ee2c
Binary files /dev/null and b/img/writtenearplugs.webp differ
diff --git a/img/writtensamsrules.png b/img/writtensamsrules.png
deleted file mode 100644
index dd27888..0000000
Binary files a/img/writtensamsrules.png and /dev/null differ
diff --git a/img/writtensamsrules.webp b/img/writtensamsrules.webp
new file mode 100644
index 0000000..75d4cbe
Binary files /dev/null and b/img/writtensamsrules.webp differ
diff --git a/img/writtenstructions.jpg b/img/writtenstructions.jpg
deleted file mode 100755
index 1f85937..0000000
Binary files a/img/writtenstructions.jpg and /dev/null differ
diff --git a/img/writtenstructions.webp b/img/writtenstructions.webp
new file mode 100644
index 0000000..e228a82
Binary files /dev/null and b/img/writtenstructions.webp differ
diff --git a/index.html b/index.html
index 9161319..fdd0a58 100644
--- a/index.html
+++ b/index.html
@@ -38,14 +38,14 @@
     <!-- Hero -->
     <section class="hero hero--collage">
       <div class="hero__collage" aria-hidden="true">
-        <img src="img/collage-1.jpg" alt="" width="480" height="360">
-        <img src="img/collage-2.jpg" alt="" width="480" height="360">
-        <img src="img/collage-3.jpg" alt="" width="480" height="360">
-        <img src="img/collage-4.jpg" alt="" width="480" height="360">
-        <img src="img/collage-5.jpg" alt="" width="480" height="360">
-        <img src="img/collage-6.jpg" alt="" width="480" height="360">
-        <img src="img/collage-7.jpg" alt="" width="480" height="360">
-        <img src="img/collage-8.jpg" alt="" width="480" height="360">
+        <img src="img/collage-1.webp" alt="" width="480" height="360">
+        <img src="img/collage-2.webp" alt="" width="480" height="360">
+        <img src="img/collage-3.webp" alt="" width="480" height="360">
+        <img src="img/collage-4.webp" alt="" width="480" height="360">
+        <img src="img/collage-5.webp" alt="" width="480" height="360">
+        <img src="img/collage-6.webp" alt="" width="480" height="360">
+        <img src="img/collage-7.webp" alt="" width="480" height="360">
+        <img src="img/collage-8.webp" alt="" width="480" height="360">
       </div>
       <div class="container">
         <p class="eyebrow eyebrow-ink mb-2">Design studio</p>
@@ -74,22 +74,22 @@
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Selected work">
             <a class="carousel__item" href="work.html" aria-label="View web design work">
-              <div class="carousel__media"><img src="img/webvictoria.png" alt="Web design project preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/webvictoria.webp" alt="Web design project preview" loading="lazy" width="800" height="600"></div>
             </a>
             <a class="carousel__item" href="work.html" aria-label="View app design work">
-              <div class="carousel__media"><img src="img/webmehavior.png" alt="App interface design preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/webmehavior.webp" alt="App interface design preview" loading="lazy" width="800" height="600"></div>
             </a>
             <a class="carousel__item" href="work.html" aria-label="View print design work">
-              <div class="carousel__media"><img src="img/printkincaidad.jpg" alt="Print advertisement design preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/printkincaidad.webp" alt="Print advertisement design preview" loading="lazy" width="800" height="600"></div>
             </a>
             <a class="carousel__item" href="work.html" aria-label="View 3D modeling work">
-              <div class="carousel__media"><img src="img/3d78williams.jpg" alt="3D modeling project preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/3d78williams.webp" alt="3D modeling project preview" loading="lazy" width="800" height="600"></div>
             </a>
             <a class="carousel__item" href="work.html" aria-label="View logo design work">
-              <div class="carousel__media"><img src="img/logoargent.png" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/logoargent.webp" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
             </a>
             <a class="carousel__item" href="work.html" aria-label="View logo design work">
-              <div class="carousel__media"><img src="img/webdatavisart.jpeg" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
+              <div class="carousel__media"><img src="img/webdatavisart.webp" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
             </a>
           </div>
           <div class="carousel__nav">
@@ -171,57 +171,57 @@
         </div>
         <ul class="case-list">
           <li class="case-item">
-            <a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.jpg">
-              <img class="case-row__thumb" src="img/site-mask-aid-project.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.webp">
+              <img class="case-row__thumb" src="img/site-mask-aid-project.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Mask Aid Project</span>
               <span class="case-row__meta">Web Design</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.jpg">
-              <img class="case-row__thumb" src="img/site-one-womans-art-and-magic.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.webp">
+              <img class="case-row__thumb" src="img/site-one-womans-art-and-magic.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">1 Woman's Art and Magic</span>
               <span class="case-row__meta">Book Design &amp; Web</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.png">
-              <img class="case-row__thumb" src="img/writtensamsrules.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.webp">
+              <img class="case-row__thumb" src="img/writtensamsrules.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Sam's Rules</span>
               <span class="case-row__meta">Book Design &amp; Web</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.png">
-              <img class="case-row__thumb" src="img/webmehavior.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.webp">
+              <img class="case-row__thumb" src="img/webmehavior.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Mehavior</span>
               <span class="case-row__meta">App Design &amp; Identity</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.jpg">
-              <img class="case-row__thumb" src="img/site-jensens-red-barn.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.webp">
+              <img class="case-row__thumb" src="img/site-jensens-red-barn.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Jensen's Red Barn</span>
               <span class="case-row__meta">Web Design</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.png">
-              <img class="case-row__thumb" src="img/3dcart.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.webp">
+              <img class="case-row__thumb" src="img/3dcart.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Upscale Food Cart</span>
               <span class="case-row__meta">3D Modeling</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.png">
-              <img class="case-row__thumb" src="img/logosilverlining.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.webp">
+              <img class="case-row__thumb" src="img/logosilverlining.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Silver Lining</span>
               <span class="case-row__meta">Logo &amp; Identity</span>
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.png">
-              <img class="case-row__thumb" src="img/webvictoria.png" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.webp">
+              <img class="case-row__thumb" src="img/webvictoria.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Victoria Fuller</span>
               <span class="case-row__meta">Web Design</span>
             </a>
@@ -234,8 +234,8 @@
             </a>
           </li>
           <li class="case-item">
-            <a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.jpg">
-              <img class="case-row__thumb" src="img/site-teach-each-other-ai.jpg" alt="" loading="lazy" width="88" height="66">
+            <a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.webp">
+              <img class="case-row__thumb" src="img/site-teach-each-other-ai.webp" alt="" loading="lazy" width="88" height="66">
               <span class="case-row__name">Teach Each Other AI</span>
               <span class="case-row__meta">Web Design</span>
             </a>
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index aab8bac..b0ed9b8 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -104,6 +104,8 @@ Next is user review of copy/design and the deployment decision.
   79 files, remote `origin` = Forgejo `2RE03-Design`.
 - **2026-09-10** - Added `TODO.md` as the backlog; the site was **published** by
   the user, and `memory-bank/`/`.clinerules/` were confirmed to stay tracked.
+- **2026-09-10** - Optimised all images to **WebP** (`img/` 20 MB -> 3.2 MB, 85%
+  smaller); `printtiresad.png` stays PNG. See `techContext.md`, Image Pipeline.
 
 ## Next Steps
 > **The full backlog lives in `TODO.md` at the repo root.** This section keeps only
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
index 83c8918..85ed52a 100644
--- a/memory-bank/progress.md
+++ b/memory-bank/progress.md
@@ -9,8 +9,9 @@
 - Six linked pages built: `index`, `case-studies`, `work`, `about`, `services`,
   `contact` - plus 10 case study detail pages in `case-studies/`.
 - Bootstrap 5.3.3 + Inter/Space Grotesk vendored locally (`css/`, `js/`, `fonts/`).
-- 46 images in `img/` (project art, client-site screenshots, 10 case-study hero
-  backgrounds, 8 homepage collage tiles).
+- 46 images in `img/`, optimised to WebP: 45 `.webp` plus `printtiresad.png`
+  (project art, client-site screenshots, 10 case-study hero backgrounds, 8 homepage
+  collage tiles). `img/` is **3.2 MB**, down from 20 MB.
 - Web3Forms contact form with required-field + email validation, accessible
   labels, and AJAX submit with a live status region.
 - Collins-style **Case Studies** feature: a typographic index with
@@ -184,3 +185,9 @@ copy/design review and the optional polish tracked in `TODO.md`.
   backlog; the memory bank keeps only current priorities and points at it. The
   **site was published** by the user, and `memory-bank/` + `.clinerules/` were
   confirmed to stay tracked.
+- **2026-09-10** - **Optimised every image to WebP**: 45 files converted (long side
+  capped at 1600px, `-q 82`, or `-q 90 -alpha_q 100` when transparent) and 97
+  references repointed across 13 HTML files. `img/` went **20 MB -> 3.2 MB**. The
+  one exception is `printtiresad.png`, kept as PNG because WebP made it bigger.
+  Verified: 0 missing references, 0 unreferenced files, all 45 WebP files decode,
+  all pages 200, and the before/after ratio-hint sets are byte-identical.
diff --git a/memory-bank/reference-materials.md b/memory-bank/reference-materials.md
index 5ffb9db..b9cf136 100644
--- a/memory-bank/reference-materials.md
+++ b/memory-bank/reference-materials.md
@@ -1,7 +1,10 @@
 # Reference Materials - 2RE03 Portfolio Site
 
-> Temporary source material in `refrence/`. NOT production assets. Do not link to
-> it. Do not delete until the site is designed and approved (user confirms).
+> Historical inventory of the original `refrence/` source material. That folder was
+> **removed on 2026-09-10** and is backed up outside the repo at
+> `/home/torrey/2RE03-unused-assets-backup/refrence/`. The filenames below are the
+> ORIGINAL source names; the production copies now live in `img/` as WebP (see
+> `techContext.md`, Image Pipeline).
 > Last updated: 2026-09-10.
 
 ## `refrence/index.html`
@@ -47,7 +50,8 @@ By category (from the carousel JSON; filenames self-label by prefix):
 | Written | `writtenearplugs.jpg`, `writtensamsrules.png`, `writtenstructions.jpg` |
 
 > **Note:** all 23 of these images were copied into the production `img/` folder
-> (2026-09-10) and are now referenced by the site. The `refrence/` originals
-> remain temporary source material and can be deleted after design approval.
-> The production `img/` folder also contains 6 additional `site-*.jpg`
-> screenshots of real client websites added later (not from `refrence/`).
+> (2026-09-10) and are now referenced by the site. They were then converted to WebP
+> (2026-09-10), so the `.png`/`.jpg` names above are the source names only, not the
+> current filenames. The production `img/` folder also contains 6 additional
+> `site-*.jpg` screenshots of real client websites added later (not from
+> `refrence/`); those are WebP too.
diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md
index 5a3c761..c860a6e 100644
--- a/memory-bank/techContext.md
+++ b/memory-bank/techContext.md
@@ -12,8 +12,8 @@ case-studies/*.html   (10 per-project case study detail pages)
 css/bootstrap.min.css   css/style.css
 js/bootstrap.bundle.min.js   js/main.js   js/case-studies.js   js/carousel.js
 fonts/Inter-latin.woff2   fonts/SpaceGrotesk-latin.woff2
-img/  46 images (10 case-study hero backgrounds + 8 homepage collage tiles
-      + 28 project/screenshot images)
+img/  46 files: 45 WebP plus `printtiresad.png` (10 case-study hero backgrounds,
+      8 homepage collage tiles, 28 project/screenshot images)
 ```
 
 No build step and no package manager - it is plain static HTML/CSS/JS.
@@ -53,6 +53,20 @@ No build step and no package manager - it is plain static HTML/CSS/JS.
 - `.gitignore` ignores OS/editor cruft only. There is no `refrence/` entry because
   that folder was removed.
 
+## Image Pipeline
+- Every production image is **WebP** except `img/printtiresad.png`, which stays PNG
+  because every WebP encode of it came out *larger* (the PNG is only 73 KB).
+- Encoding recipe (`cwebp`): long side capped at **1600px**, `-q 82` for opaque
+  images, `-q 90 -alpha_q 100` for anything with transparency.
+- Result: `img/` went from ~20 MB to **3.2 MB** (85% smaller) with no visible loss
+  (measured SSIM distortion 0.0003 to 0.018, where 0 is identical).
+- The original JPEG/PNG files are kept **outside** the repo at
+  `/home/torrey/2RE03-unused-assets-backup/img-webp-originals/`.
+- Most `<img>` tags declare the **display frame**, not the file's native size: the
+  carousel cards are a 4:3 box (`.carousel__media`, `object-fit: cover`) so they
+  say `800x600`, and the hover-preview thumbnails say `88x66`. Those attributes are
+  deliberate and are *not* expected to match the file's own dimensions.
+
 ## Deployment
 - The site is **published** (hosted by the user). The live URL is not written down
   anywhere in this repo yet, so record it here once confirmed.
diff --git a/work.html b/work.html
index adba4af..b9b3dcd 100644
--- a/work.html
+++ b/work.html
@@ -50,11 +50,11 @@
         <p class="gallery-caption mb-4">Examples of our web and app design work.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Web design gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/webvictoria.png" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/websinosalescopy.jpg" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-cool-crap-from-china.jpg" alt="Cool Crap From China website" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-jensens-red-barn.jpg" alt="Jensen's Red Barn website" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-mask-aid-project.jpg" alt="Mask Aid Project website" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/webvictoria.webp" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/websinosalescopy.webp" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-cool-crap-from-china.webp" alt="Cool Crap From China website" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-jensens-red-barn.webp" alt="Jensen's Red Barn website" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/site-mask-aid-project.webp" alt="Mask Aid Project website" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
@@ -73,13 +73,13 @@
         <p class="gallery-caption mb-4">Logos created for clients and for our own projects.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Logo design gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logoargent.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logobackass.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logodrinking.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logodrive.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logosilverlining.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/logoylem.png" alt="Logo design for an organization" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/webdatavisart.jpeg" alt="Logo design" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logoargent.webp" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logobackass.webp" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logodrinking.webp" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logodrive.webp" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logosilverlining.webp" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/logoylem.webp" alt="Logo design for an organization" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/webdatavisart.webp" alt="Logo design" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
@@ -99,9 +99,9 @@
         <p class="gallery-caption mb-4">Apps we've designed: the interface, the buttons, and the identity around them.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="App design gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/webmehavior.png" alt="Mehavior app interface design" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/web50shadesof2048.png" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/2plus5times3.jpg" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/webmehavior.webp" alt="Mehavior app interface design" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/web50shadesof2048.webp" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/2plus5times3.webp" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
@@ -120,10 +120,10 @@
         <p class="gallery-caption mb-4">Examples of our print design work.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Print design gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/printkincaidad.jpg" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/printmacchiariniad.png" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/printkincaidad.webp" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/printmacchiariniad.webp" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
             <figure class="carousel__item"><div class="carousel__media"><img src="img/printtiresad.png" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/printylemcover.png" alt="Magazine cover design" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/printylemcover.webp" alt="Magazine cover design" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
@@ -142,10 +142,10 @@
         <p class="gallery-caption mb-4">3D modeling for client projects.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="3D modeling gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/3d78williams.jpg" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dabandoned.jpg" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dcart.png" alt="3D product modeling project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dcoop.jpg" alt="3D model of a chicken coop" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/3d78williams.webp" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dabandoned.webp" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dcart.webp" alt="3D product modeling project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/3dcoop.webp" alt="3D model of a chicken coop" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
@@ -164,9 +164,9 @@
         <p class="gallery-caption mb-4">Sales copy, documentation, and editorial: words we designed and wrote.</p>
         <div class="carousel" data-carousel>
           <div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Words gallery">
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtenearplugs.jpg" alt="Designed and written project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtensamsrules.png" alt="Book layout and editing project" loading="lazy" width="800" height="600"></div></figure>
-            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtenstructions.jpg" alt="Instructional design and writing project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtenearplugs.webp" alt="Designed and written project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtensamsrules.webp" alt="Book layout and editing project" loading="lazy" width="800" height="600"></div></figure>
+            <figure class="carousel__item"><div class="carousel__media"><img src="img/writtenstructions.webp" alt="Instructional design and writing project" loading="lazy" width="800" height="600"></div></figure>
           </div>
           <div class="carousel__nav">
             <button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>