Optimise all images to WebP: img/ 20 MB down to 3.2 MB

45 images converted with cwebp (long side capped at 1600px; -q 82, or -q 90 -alpha_q 100 when transparent) and 97 references repointed across 13 HTML files. printtiresad.png stays PNG because every WebP encode of it came out larger. Verified: 0 missing references, 0 unreferenced files, all 45 WebP files decode, all 16 pages balance and serve 200, and the before/after width/height ratio-hint sets are identical. NOTE: the published site must be redeployed for the new assets to go live.

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.
+- [x] Optimise images to WebP: `img/` was 20 MB of the 21 MB repo. Done: 45 images
-- [ ] Confirm the Forgejo repo (`2RE03-Design`) is private.
+  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
 

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">
+            <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.jpg" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <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.jpg" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.webp">
-              <img class="case-row__thumb" src="img/writtensamsrules.png" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.webp">
-              <img class="case-row__thumb" src="img/webmehavior.png" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <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.jpg" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <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.png" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.webp">
-              <img class="case-row__thumb" src="img/logosilverlining.png" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.webp">
-              <img class="case-row__thumb" src="img/webvictoria.png" alt="" loading="lazy" width="88" height="66">
+              <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">
+            <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.jpg" alt="" loading="lazy" width="88" height="66">
+              <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>

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">

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">

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">

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">

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">

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">

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">

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">

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>

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">