Support WEBP versions of single images and use this for avatars

These photos of individuals are fairly large files for what they
are, so making the available in WEBP should save visitors some
download size. Created with the same script introduced previously.

Author: PeterJCLaw

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

governance.html

@@ -45,9 +45,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 +63,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 +80,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>

images/advertising/headshots/competitor-becky-01.jpg.webp

@@ -127,9 +127,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 +149,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 +173,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>