diff --git a/_includes/picture-with-webp.html b/_includes/picture-with-webp.html
new file mode 100644
index 00000000..8e412ad3
--- /dev/null
+++ b/_includes/picture-with-webp.html
@@ -0,0 +1,4 @@
+<picture>
+  <source srcset="{{ site.baseurl }}{{ include.image }}.webp" type="image/webp" />
+  <img class="{{ include.class }}" src="{{ site.baseurl }}{{ include.image }}" alt="{{ include.alt }}" />
+</picture>
diff --git a/governance.html b/governance.html
index 86f36dd4..a71eb238 100644
--- a/governance.html
+++ b/governance.html
@@ -2,6 +2,7 @@
 layout: page
 title: Governance
 permalink: /governance/
+# cspell:ignore headshots
 ---
 <div class="panel panel-header panel-boxes">
   <div class="hero-container panel-container">
@@ -45,9 +46,12 @@ <h3>Diane Dowling</h3>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="trustee-avatar"
-          src="{{ '/images/advertising/headshots/trustee-diane-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of Diane" />
+        {%
+          include picture-with-webp.html
+          class="trustee-avatar"
+          image="/images/advertising/headshots/trustee-diane-01.jpg"
+          alt="Headshot of Diane"
+        %}
       </div>
     </div>
     <div class="row vertically-centered-row trustee-row">
@@ -60,9 +64,12 @@ <h3>David Massey</h3>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="trustee-avatar"
-          src="{{ '/images/advertising/headshots/trustee-david-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of David" />
+        {%
+          include picture-with-webp.html
+          class="trustee-avatar"
+          image="/images/advertising/headshots/trustee-david-01.jpg"
+          alt="Headshot of David"
+        %}
       </div>
     </div>
     <div class="row vertically-centered-row trustee-row">
@@ -74,9 +81,12 @@ <h3>Thomas "Scarzy" Scarsbrook</h3>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="trustee-avatar"
-          src="{{ '/images/advertising/headshots/trustee-scarzy-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of Thomas" />
+        {%
+          include picture-with-webp.html
+          class="trustee-avatar"
+          image="/images/advertising/headshots/trustee-scarzy-01.jpg"
+          alt="Headshot of Thomas"
+        %}
       </div>
     </div>
   </div>
diff --git a/images/advertising/headshots/competitor-becky-01.jpg.webp b/images/advertising/headshots/competitor-becky-01.jpg.webp
new file mode 100644
index 00000000..8254134f
Binary files /dev/null and b/images/advertising/headshots/competitor-becky-01.jpg.webp differ
diff --git a/images/advertising/headshots/competitor-james-01.jpg.webp b/images/advertising/headshots/competitor-james-01.jpg.webp
new file mode 100644
index 00000000..5389c5c0
Binary files /dev/null and b/images/advertising/headshots/competitor-james-01.jpg.webp differ
diff --git a/images/advertising/headshots/competitor-phil-01.jpg.webp b/images/advertising/headshots/competitor-phil-01.jpg.webp
new file mode 100644
index 00000000..67cb7854
Binary files /dev/null and b/images/advertising/headshots/competitor-phil-01.jpg.webp differ
diff --git a/images/advertising/headshots/trustee-david-01.jpg.webp b/images/advertising/headshots/trustee-david-01.jpg.webp
new file mode 100644
index 00000000..4377f0ca
Binary files /dev/null and b/images/advertising/headshots/trustee-david-01.jpg.webp differ
diff --git a/images/advertising/headshots/trustee-diane-01.jpg.webp b/images/advertising/headshots/trustee-diane-01.jpg.webp
new file mode 100644
index 00000000..0e6e72f7
Binary files /dev/null and b/images/advertising/headshots/trustee-diane-01.jpg.webp differ
diff --git a/images/advertising/headshots/trustee-scarzy-01.jpg.webp b/images/advertising/headshots/trustee-scarzy-01.jpg.webp
new file mode 100644
index 00000000..7af22106
Binary files /dev/null and b/images/advertising/headshots/trustee-scarzy-01.jpg.webp differ
diff --git a/index.html b/index.html
index 8ce58394..6c263466 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 ---
 layout: home
+# cspell:ignore headshots
 ---
 <div class="panel">
   <div class="fixed-width">
@@ -127,9 +128,12 @@ <h2 class="text-center">Testimonials</h2>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="testimonial-avatar"
-          src="{{ '/images/advertising/headshots/competitor-phil-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of Phil" />
+        {%
+          include picture-with-webp.html
+          class="testimonial-avatar"
+          image="/images/advertising/headshots/competitor-phil-01.jpg"
+          alt="Headshot of Phil"
+        %}
       </div>
     </div>
     <div class="row vertically-centered-row top-spacing testimonial-row">
@@ -146,9 +150,12 @@ <h2 class="text-center">Testimonials</h2>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="testimonial-avatar"
-          src="{{ '/images/advertising/headshots/competitor-becky-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of Becky" />
+        {%
+          include picture-with-webp.html
+          class="testimonial-avatar"
+          image="/images/advertising/headshots/competitor-becky-01.jpg"
+          alt="Headshot of Becky"
+        %}
       </div>
     </div>
     <div class="row vertically-centered-row top-spacing testimonial-row">
@@ -167,9 +174,12 @@ <h2 class="text-center">Testimonials</h2>
         </p>
       </div>
       <div class="column m-3-12 horizontally-centered-column">
-        <img class="testimonial-avatar"
-          src="{{ '/images/advertising/headshots/competitor-james-01.jpg' | prepend: site.baseurl }}"
-          alt="Headshot of James" />
+        {%
+          include picture-with-webp.html
+          class="testimonial-avatar"
+          image="/images/advertising/headshots/competitor-james-01.jpg"
+          alt="Headshot of James"
+        %}
       </div>
     </div>
   </div>