Optimises Committee images

39 files changed, 83 insertions, 14 deletions

diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro
index d026047..9a5a55b 100644
--- a/src/components/CommitteeList/CommitteeListItem.astro
+++ b/src/components/CommitteeList/CommitteeListItem.astro
@@ -19,7 +19,23 @@ const t = translate(locale);
 <li class="committee__member">
   {
     committeeMember.img && (
-      <img class="committee__member__img" src={committeeMember.img.src} alt="" />
+      <img
+        class="committee__member__img"
+        srcset={`
+          ${committeeMember.img.width106.src} 106w,
+          ${committeeMember.img.width146.src} 146w,
+          ${committeeMember.img.width192.src} 192w,
+          ${committeeMember.img.width222.src} 222w
+        `}
+        sizes="
+          (min-width: 120rem) 222px,
+          (min-width: 96rem) 146px,
+          (min-width: 64rem) 192px,
+          (min-width: 48rem) 222px,
+          106px
+        "
+        alt=""
+      />
     )
   }
   <div class="committee__member__text">
diff --git a/src/data/committee.ts b/src/data/committee.ts
index d0cdf83..606268a 100644
--- a/src/data/committee.ts
+++ b/src/data/committee.ts
@@ -1,11 +1,29 @@
 import type { CommitteeMember } from '$types/CommitteeMember';
 import CommitteeRole from '$enums/CommitteeRole';
-import RabWilsonImgSrc from '$images/committee/rab-wilson.jpg';
-import JoeCarstairsImgSrc from '$images/committee/joe-carstairs.jpg';
-import TonyBeekmanImgSrc from '$images/committee/tony-beekman.jpg';
-import DavidBleimanImgSrc from '$images/committee/david-bleiman.jpg';
-import WilliamHershawImgSrc from '$images/committee/william-hershaw.jpg';
-import GeorgeTWattImgSrc from '$images/committee/george-t-watt.jpg';
+import RabWilsonImg106Src from '$images/committee/rab-wilson-106w.webp';
+import RabWilsonImg146Src from '$images/committee/rab-wilson-146w.webp';
+import RabWilsonImg192Src from '$images/committee/rab-wilson-192w.webp';
+import RabWilsonImg222Src from '$images/committee/rab-wilson-222w.webp';
+import JoeCarstairsImg106Src from '$images/committee/joe-carstairs-106w.webp';
+import JoeCarstairsImg146Src from '$images/committee/joe-carstairs-146w.webp';
+import JoeCarstairsImg192Src from '$images/committee/joe-carstairs-192w.webp';
+import JoeCarstairsImg222Src from '$images/committee/joe-carstairs-222w.webp';
+import TonyBeekmanImg106Src from '$images/committee/tony-beekman-106w.webp';
+import TonyBeekmanImg146Src from '$images/committee/tony-beekman-146w.webp';
+import TonyBeekmanImg192Src from '$images/committee/tony-beekman-192w.webp';
+import TonyBeekmanImg222Src from '$images/committee/tony-beekman-222w.webp';
+import DavidBleimanImg106Src from '$images/committee/david-bleiman-106w.webp';
+import DavidBleimanImg146Src from '$images/committee/david-bleiman-146w.webp';
+import DavidBleimanImg192Src from '$images/committee/david-bleiman-192w.webp';
+import DavidBleimanImg222Src from '$images/committee/david-bleiman-222w.webp';
+import WilliamHershawImg106Src from '$images/committee/william-hershaw-106w.webp';
+import WilliamHershawImg146Src from '$images/committee/william-hershaw-146w.webp';
+import WilliamHershawImg192Src from '$images/committee/william-hershaw-192w.webp';
+import WilliamHershawImg222Src from '$images/committee/william-hershaw-222w.webp';
+import GeorgeTWattImg106Src from '$images/committee/george-t-watt-106w.webp';
+import GeorgeTWattImg146Src from '$images/committee/george-t-watt-146w.webp';
+import GeorgeTWattImg192Src from '$images/committee/george-t-watt-192w.webp';
+import GeorgeTWattImg222Src from '$images/committee/george-t-watt-222w.webp';
 
 const committee: CommitteeMember[] = [
   {
@@ -23,7 +41,12 @@ const committee: CommitteeMember[] = [
         playwright, newpapaer columnist and commentator on the Scots language. 
       `,
     },
-    img: RabWilsonImgSrc,
+    img: {
+      width106: RabWilsonImg106Src,
+      width146: RabWilsonImg146Src,
+      width192: RabWilsonImg192Src,
+      width222: RabWilsonImg222Src,
+    },
   },
   {
     name: 'Joe Carstairs',
@@ -40,7 +63,12 @@ const committee: CommitteeMember[] = [
         He is from Perth but now lives in Edinburgh, where he lived since 2018.
       `,
     },
-    img: JoeCarstairsImgSrc,
+    img: {
+      width106: JoeCarstairsImg106Src,
+      width146: JoeCarstairsImg146Src,
+      width192: JoeCarstairsImg192Src,
+      width222: JoeCarstairsImg222Src,
+    },
   },
   {
     name: 'Tony Beekman',
@@ -61,7 +89,12 @@ const committee: CommitteeMember[] = [
         stories which he is chuffed to see in Lallans occasionally.
       `,
     },
-    img: TonyBeekmanImgSrc,
+    img: {
+      width106: TonyBeekmanImg106Src,
+      width146: TonyBeekmanImg146Src,
+      width192: TonyBeekmanImg192Src,
+      width222: TonyBeekmanImg222Src,
+    },
   },
   {
     name: 'David Bleiman',
@@ -84,7 +117,12 @@ const committee: CommitteeMember[] = [
         </a>.
       `,
     },
-    img: DavidBleimanImgSrc,
+    img: {
+      width106: DavidBleimanImg106Src,
+      width146: DavidBleimanImg146Src,
+      width192: DavidBleimanImg192Src,
+      width222: DavidBleimanImg222Src,
+    },
   },
   {
     name: 'Michael Everson',
@@ -137,7 +175,12 @@ const committee: CommitteeMember[] = [
         </a>.
       `,
     },
-    img: WilliamHershawImgSrc,
+    img: {
+      width106: WilliamHershawImg106Src,
+      width146: WilliamHershawImg146Src,
+      width192: WilliamHershawImg192Src,
+      width222: WilliamHershawImg222Src,
+    },
   },
   {
     name: 'Derrick McClure',
@@ -186,7 +229,12 @@ const committee: CommitteeMember[] = [
         <a class="link" href="/en-GB/furthsettins/scotsoun">Scotsoun</a>.
       `,
     },
-    img: GeorgeTWattImgSrc,
+    img: {
+      width106: GeorgeTWattImg106Src,
+      width146: GeorgeTWattImg146Src,
+      width192: GeorgeTWattImg192Src,
+      width222: GeorgeTWattImg222Src,
+    },
   },
 ];
 
diff --git a/src/images/committee/david-bleiman-106w.webp b/src/images/committee/david-bleiman-106w.webp
new file mode 100644
index 0000000..74b6ecb
--- /dev/null
+++ b/src/images/committee/david-bleiman-106w.webp
diff --git a/src/images/committee/david-bleiman-146w.webp b/src/images/committee/david-bleiman-146w.webp
new file mode 100644
index 0000000..3ef6324
--- /dev/null
+++ b/src/images/committee/david-bleiman-146w.webp
diff --git a/src/images/committee/david-bleiman-192w.webp b/src/images/committee/david-bleiman-192w.webp
new file mode 100644
index 0000000..8b7e489
--- /dev/null
+++ b/src/images/committee/david-bleiman-192w.webp
diff --git a/src/images/committee/david-bleiman-222w.webp b/src/images/committee/david-bleiman-222w.webp
new file mode 100644
index 0000000..89cd1e8
--- /dev/null
+++ b/src/images/committee/david-bleiman-222w.webp
diff --git a/src/images/committee/david-bleiman.jpg b/src/images/committee/david-bleiman.jpg
deleted file mode 100644
index 28b13cf..0000000
--- a/src/images/committee/david-bleiman.jpg
+++ /dev/null
diff --git a/src/images/committee/david-bleiman.webp b/src/images/committee/david-bleiman.webp
new file mode 100644
index 0000000..c859694
--- /dev/null
+++ b/src/images/committee/david-bleiman.webp
diff --git a/src/images/committee/george-t-watt-106w.webp b/src/images/committee/george-t-watt-106w.webp
new file mode 100644
index 0000000..ca459f0
--- /dev/null
+++ b/src/images/committee/george-t-watt-106w.webp
diff --git a/src/images/committee/george-t-watt-146w.webp b/src/images/committee/george-t-watt-146w.webp
new file mode 100644
index 0000000..dd775b1
--- /dev/null
+++ b/src/images/committee/george-t-watt-146w.webp
diff --git a/src/images/committee/george-t-watt-192w.webp b/src/images/committee/george-t-watt-192w.webp
new file mode 100644
index 0000000..95a6764
--- /dev/null
+++ b/src/images/committee/george-t-watt-192w.webp
diff --git a/src/images/committee/george-t-watt-222w.webp b/src/images/committee/george-t-watt-222w.webp
new file mode 100644
index 0000000..12550f4
--- /dev/null
+++ b/src/images/committee/george-t-watt-222w.webp
diff --git a/src/images/committee/george-t-watt.jpg b/src/images/committee/george-t-watt.jpg
deleted file mode 100644
index c3c41c4..0000000
--- a/src/images/committee/george-t-watt.jpg
+++ /dev/null
diff --git a/src/images/committee/george-t-watt.webp b/src/images/committee/george-t-watt.webp
new file mode 100644
index 0000000..dbe8373
--- /dev/null
+++ b/src/images/committee/george-t-watt.webp
diff --git a/src/images/committee/joe-carstairs-106w.webp b/src/images/committee/joe-carstairs-106w.webp
new file mode 100644
index 0000000..42477f6
--- /dev/null
+++ b/src/images/committee/joe-carstairs-106w.webp
diff --git a/src/images/committee/joe-carstairs-146w.webp b/src/images/committee/joe-carstairs-146w.webp
new file mode 100644
index 0000000..8758fe3
--- /dev/null
+++ b/src/images/committee/joe-carstairs-146w.webp
diff --git a/src/images/committee/joe-carstairs-192w.webp b/src/images/committee/joe-carstairs-192w.webp
new file mode 100644
index 0000000..2293997
--- /dev/null
+++ b/src/images/committee/joe-carstairs-192w.webp
diff --git a/src/images/committee/joe-carstairs-222w.webp b/src/images/committee/joe-carstairs-222w.webp
new file mode 100644
index 0000000..0d2d595
--- /dev/null
+++ b/src/images/committee/joe-carstairs-222w.webp
diff --git a/src/images/committee/joe-carstairs.jpg b/src/images/committee/joe-carstairs.jpg
deleted file mode 100644
index ecd9f38..0000000
--- a/src/images/committee/joe-carstairs.jpg
+++ /dev/null
diff --git a/src/images/committee/joe-carstairs.webp b/src/images/committee/joe-carstairs.webp
new file mode 100644
index 0000000..04aaea8
--- /dev/null
+++ b/src/images/committee/joe-carstairs.webp
diff --git a/src/images/committee/rab-wilson-106w.webp b/src/images/committee/rab-wilson-106w.webp
new file mode 100644
index 0000000..56cbd5f
--- /dev/null
+++ b/src/images/committee/rab-wilson-106w.webp
diff --git a/src/images/committee/rab-wilson-146w.webp b/src/images/committee/rab-wilson-146w.webp
new file mode 100644
index 0000000..a5d7d65
--- /dev/null
+++ b/src/images/committee/rab-wilson-146w.webp
diff --git a/src/images/committee/rab-wilson-192w.webp b/src/images/committee/rab-wilson-192w.webp
new file mode 100644
index 0000000..a372240
--- /dev/null
+++ b/src/images/committee/rab-wilson-192w.webp
diff --git a/src/images/committee/rab-wilson-222w.webp b/src/images/committee/rab-wilson-222w.webp
new file mode 100644
index 0000000..ead62d2
--- /dev/null
+++ b/src/images/committee/rab-wilson-222w.webp
diff --git a/src/images/committee/rab-wilson.jpg b/src/images/committee/rab-wilson.jpg
deleted file mode 100644
index bbfc252..0000000
--- a/src/images/committee/rab-wilson.jpg
+++ /dev/null
diff --git a/src/images/committee/rab-wilson.webp b/src/images/committee/rab-wilson.webp
new file mode 100644
index 0000000..a3421d5
--- /dev/null
+++ b/src/images/committee/rab-wilson.webp
diff --git a/src/images/committee/tony-beekman-106w.webp b/src/images/committee/tony-beekman-106w.webp
new file mode 100644
index 0000000..ef44dc6
--- /dev/null
+++ b/src/images/committee/tony-beekman-106w.webp
diff --git a/src/images/committee/tony-beekman-146w.webp b/src/images/committee/tony-beekman-146w.webp
new file mode 100644
index 0000000..62bdc15
--- /dev/null
+++ b/src/images/committee/tony-beekman-146w.webp
diff --git a/src/images/committee/tony-beekman-192w.webp b/src/images/committee/tony-beekman-192w.webp
new file mode 100644
index 0000000..6c0b077
--- /dev/null
+++ b/src/images/committee/tony-beekman-192w.webp
diff --git a/src/images/committee/tony-beekman-222w.webp b/src/images/committee/tony-beekman-222w.webp
new file mode 100644
index 0000000..93667ff
--- /dev/null
+++ b/src/images/committee/tony-beekman-222w.webp
diff --git a/src/images/committee/tony-beekman.jpg b/src/images/committee/tony-beekman.jpg
deleted file mode 100644
index b450b41..0000000
--- a/src/images/committee/tony-beekman.jpg
+++ /dev/null
diff --git a/src/images/committee/tony-beekman.webp b/src/images/committee/tony-beekman.webp
new file mode 100644
index 0000000..998f4b5
--- /dev/null
+++ b/src/images/committee/tony-beekman.webp
diff --git a/src/images/committee/william-hershaw-106w.webp b/src/images/committee/william-hershaw-106w.webp
new file mode 100644
index 0000000..bed87e3
--- /dev/null
+++ b/src/images/committee/william-hershaw-106w.webp
diff --git a/src/images/committee/william-hershaw-146w.webp b/src/images/committee/william-hershaw-146w.webp
new file mode 100644
index 0000000..f38c187
--- /dev/null
+++ b/src/images/committee/william-hershaw-146w.webp
diff --git a/src/images/committee/william-hershaw-192w.webp b/src/images/committee/william-hershaw-192w.webp
new file mode 100644
index 0000000..23e88ea
--- /dev/null
+++ b/src/images/committee/william-hershaw-192w.webp
diff --git a/src/images/committee/william-hershaw-222w.webp b/src/images/committee/william-hershaw-222w.webp
new file mode 100644
index 0000000..8fcbe56
--- /dev/null
+++ b/src/images/committee/william-hershaw-222w.webp
diff --git a/src/images/committee/william-hershaw.jpg b/src/images/committee/william-hershaw.jpg
deleted file mode 100644
index 8b7c53a..0000000
--- a/src/images/committee/william-hershaw.jpg
+++ /dev/null
diff --git a/src/images/committee/william-hershaw.webp b/src/images/committee/william-hershaw.webp
new file mode 100644
index 0000000..bba8eb7
--- /dev/null
+++ b/src/images/committee/william-hershaw.webp
diff --git a/src/types/CommitteeMember.d.ts b/src/types/CommitteeMember.d.ts
index e044ffe..8aedaf8 100644
--- a/src/types/CommitteeMember.d.ts
+++ b/src/types/CommitteeMember.d.ts
@@ -5,5 +5,10 @@ type CommitteeMember = {
   name: string;
   roles: CommitteeRole[];
   bio?: { [key in Locale]: string };
-  img?: ImageMetadata;
+  img?: {
+    width106: ImageMetadata;
+    width146: ImageMetadata;
+    width192: ImageMetadata;
+    width222: ImageMetadata;
+  };
 };