Use WEBP images to make things faster

.spelling

@@ -16,7 +16,9 @@ Collyer
 Collyer's
 Deniz
 Ducktor
+endcapture
 esque
+forloop
 Gallard
 Greshams
 Gymnasium

_includes/multi-size-picture.html

@@ -0,0 +1,29 @@
+{%- assign sizes_list = include.sizes | split: ',' %}
+{%- for size in sizes_list %}
+  {%- capture tmp %}@{{ size }}.{% endcapture -%}
+  {% if include.image contains tmp %}
+    {% assign size_tag = tmp %}
+  {% endif %}
+{% endfor %}
+{%- if size_tag -%}
+<picture>
+  {%- if include.webp %}
+    <source
+      srcset="{% for size in sizes_list -%}
+        {%- capture new_tag %}@{{ size }}.{% endcapture -%}
+        {{ site.baseurl }}{{ include.image | replace: size_tag, new_tag }}.webp {{ size }}{% if forloop.last == false %},{% endif %}
+      {% endfor %}"
+      type="image/webp"
+    />
+  {%- endif %}
+  <source
+    srcset="{% for size in sizes_list -%}
+      {%- capture new_tag %}@{{ size }}.{% endcapture -%}
+      {{ site.baseurl }}{{ include.image | replace: size_tag, new_tag }} {{ size }}{% if forloop.last == false %},{% endif %}
+    {% endfor %}"
+  />
+  <img class="{{ include.class }}" src="{{ site.baseurl }}{{ include.image }}" alt="{{ include.alt }}" />
+</picture>
+{%- else -%}
+  <strong style="color: red">No image size tag detected!</strong>
+{%- endif -%}

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

_sass/common.scss

@@ -3,6 +3,14 @@
   background-size: cover;
 }
 
+@mixin gradient-background-with-webp($top, $bottom, $image) {
+  @include gradient-background($top, $bottom, $image);
+
+  @supports(background-image: url($image + '.webp')) {
+    @include gradient-background($top, $bottom, $image + '.20pc.webp');
+  }
+}
+
 .fixed-width {
   @include media-query("medium") {
     width: 960px;

_sass/hero.scss

@@ -6,7 +6,7 @@ $hero-top-colour: transparentize($sr-blue, 0.05);
 $hero-bottom-colour: transparentize($sr-blue, 0.5);
 
 .hero {
-  @include gradient-background(
+  @include gradient-background-with-webp(
     $hero-top-colour,
     $hero-bottom-colour,
     $hero-background-image

_sass/panel.scss

@@ -62,23 +62,23 @@ img.image {
 }
 
 .panel-blueshirts {
-  @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/blueshirts.jpg");
+  @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/blueshirts.jpg");
 }
 
 .panel-boxes {
-  @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/boxes.jpg");
+  @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/boxes.jpg");
 }
 
 .panel-arena {
-  @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/arena.jpg");
+  @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/arena.jpg");
 }
 
 .panel-sponsor {
-  @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/sponsor-hero.jpg");
+  @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/sponsor-hero.jpg");
 }
 
 .panel-grandstand {
-  @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/grandstand.jpg");
+  @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/grandstand.jpg");
 }
 
 .panel-container {

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>

index.html

@@ -1,16 +1,19 @@
 ---
 layout: home
+# cspell:ignore headshots
 ---
 <div class="panel">
   <div class="fixed-width">
     <h2 class="text-center">What is Student Robotics?</h2>
     <div class="row vertically-centered-row">
       <div class="column m-6-12">
-        <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-              src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-          alt="Competitors talking while placing their robot in their starting corner in the arena" />
+        {%
+          include multi-size-picture.html
+          sizes="1x,2x,3x"
+          image="/images/advertising/[email protected]"
+          webp="true"
+          alt="Competitors talking while placing their robot in their starting corner in the arena"
+        %}
       </div>
       <div class="column m-6-12">
         <p class="about-p">
@@ -57,11 +60,13 @@ <h2>Valuable skills for young people</h2>
     </div>
     <div class="row">
       <div class="column center-label s-4-12">
-        <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-              src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-              alt="A team of students looking happy standing behind their robot"/>
+        {%
+          include multi-size-picture.html
+          sizes="1x,2x,3x"
+          image="/images/advertising/[email protected]"
+          webp="true"
+          alt="A team of students looking happy standing behind their robot"
+        %}
         <h3>Working as a team</h3>
         <p>
           For a team to succeed at Student Robotics, they need to work
@@ -70,11 +75,13 @@ <h3>Working as a team</h3>
         </p>
       </div>
       <div class="column center-label s-4-12">
-        <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-          src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-          alt="Three competitors sitting in front of a laptop" />
+        {%
+          include multi-size-picture.html
+          sizes="1x,2x,3x"
+          image="/images/advertising/[email protected]"
+          webp="true"
+          alt="Three competitors sitting in front of a laptop"
+        %}
         <h3>Writing real code</h3>
         <p>
           Without some serious code, even the most masterfully built robots
@@ -83,11 +90,13 @@ <h3>Writing real code</h3>
         </p>
       </div>
       <div class="column center-label s-4-12">
-        <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                      {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-          src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-          alt="Students and a teacher sitting around their robot" />
+        {%
+          include multi-size-picture.html
+          sizes="1x,2x,3x"
+          image="/images/advertising/[email protected]"
+          webp="true"
+          alt="Students and a teacher sitting around their robot"
+        %}
         <h3>Building a robot</h3>
         <p>
           There's nothing quite like building something and bringing it to
@@ -119,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">
@@ -138,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">
@@ -159,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>

scripts/convert-image.sh

@@ -0,0 +1,19 @@
+#/bin/bash
+
+set -euo pipefail
+IFS=$'\n\t'
+
+
+if [ "$#" -lt 1 ]
+then
+    echo "Usage $0 FILE ..."
+    exit 1
+fi
+
+
+for f in "$@"
+do
+    echo "Converting $f to WEBP"
+    # Via ImageMagick
+    convert "$f" "${f}.webp"
+done

sponsor.html

@@ -52,20 +52,24 @@ <h4>£500 or more</h4>
           </ul>
         </div>
         <div class="column s-6-12 sponsor-level-image">
-          <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-            src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-            alt="Team of competitors gathered around a robot using a glue gun" />
+          {%
+            include multi-size-picture.html
+            sizes="1x,2x,3x"
+            image="/images/advertising/[email protected]"
+            webp="true"
+            alt="Team of competitors gathered around a robot using a glue gun"
+          %}
         </div>
       </div>
       <div class="row sponsor-level">
         <div class="column s-6-12 sponsor-level-image">
-          <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-            src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-            alt="Robot with a scissor lift mechanism next to a token covered in fiducial markers" />
+          {%
+            include multi-size-picture.html
+            sizes="1x,2x,3x"
+            image="/images/advertising/[email protected]"
+            webp="true"
+            alt="Robot with a scissor lift mechanism next to a token covered in fiducial markers"
+          %}
         </div>
         <div class="column s-6-12 sponsor-level-description">
           <h3>Silver</h3>
@@ -90,20 +94,24 @@ <h4>£2,000 or more</h4>
           </ul>
         </div>
         <div class="column s-6-12 sponsor-level-image">
-          <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-            src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-            alt="Competitors sat in front of a laptop looking at code" />
+          {%
+            include multi-size-picture.html
+            sizes="1x,2x,3x"
+            image="/images/advertising/[email protected]"
+            webp="true"
+            alt="Competitors sat in front of a laptop looking at code"
+          %}
         </div>
       </div>
       <div class="row sponsor-level">
         <div class="column s-6-12 sponsor-level-image">
-          <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }},
-                       {{ '/images/advertising/[email protected] 3x' | prepend: site.baseurl }}"
-            src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-            alt="Two competitors standing in an arena, one holding a robot, talking to a team mate outside the arena" />
+          {%
+            include multi-size-picture.html
+            sizes="1x,2x,3x"
+            image="/images/advertising/[email protected]"
+            webp="true"
+            alt="Two competitors standing in an arena, one holding a robot, talking to a team mate outside the arena"
+          %}
         </div>
         <div class="column s-6-12 sponsor-level-description">
           <h3>Platinum</h3>
@@ -119,11 +127,14 @@ <h4>£10,000 or more</h4>
       <p style="margin-top: 2rem; text-align: center; font-size: 18px;">
         If there is anything not mentioned we can offer you or you would be interested in - <a href="#sponsor-signup-panel">Get in touch!</a>
       </p>
-      <img srcset="{{ '/images/advertising/[email protected] 1x' | prepend: site.baseurl }},
-                   {{ '/images/advertising/[email protected] 2x' | prepend: site.baseurl }}"
-        src="{{ '/images/advertising/[email protected]' | prepend: site.baseurl }}"
-        alt="A robot built by competitors themed to look like WALL-E" />
-    </div>
+      {%
+        include multi-size-picture.html
+        sizes="1x,2x"
+        image="/images/advertising/[email protected]"
+        webp="true"
+        alt="A robot built by competitors themed to look like WALL-E"
+      %}
+      </div>
   </div>
 </div>
 <div class="panel">