diff --git a/public/assets/bg-body-mind-change.png b/public/assets/bg-body-mind-change.png
deleted file mode 100644
index bb76520..0000000
Binary files a/public/assets/bg-body-mind-change.png and /dev/null differ
diff --git a/public/assets/bg-body-mind-change.webp b/public/assets/bg-body-mind-change.webp
new file mode 100644
index 0000000..b501ebc
Binary files /dev/null and b/public/assets/bg-body-mind-change.webp differ
diff --git a/public/assets/bg-chicken.png b/public/assets/bg-chicken.png
deleted file mode 100644
index 4e81f7f..0000000
Binary files a/public/assets/bg-chicken.png and /dev/null differ
diff --git a/public/assets/bg-chicken.webp b/public/assets/bg-chicken.webp
new file mode 100644
index 0000000..d322b35
Binary files /dev/null and b/public/assets/bg-chicken.webp differ
diff --git a/public/assets/bg-commerce-awards.png b/public/assets/bg-commerce-awards.png
deleted file mode 100644
index adfde9e..0000000
Binary files a/public/assets/bg-commerce-awards.png and /dev/null differ
diff --git a/public/assets/bg-commerce-awards.webp b/public/assets/bg-commerce-awards.webp
new file mode 100644
index 0000000..4776841
Binary files /dev/null and b/public/assets/bg-commerce-awards.webp differ
diff --git a/public/assets/bg-draggable.png b/public/assets/bg-draggable.png
deleted file mode 100644
index 3dc4de6..0000000
Binary files a/public/assets/bg-draggable.png and /dev/null differ
diff --git a/public/assets/bg-draggable.webp b/public/assets/bg-draggable.webp
new file mode 100644
index 0000000..f76b6a4
Binary files /dev/null and b/public/assets/bg-draggable.webp differ
diff --git a/public/assets/bg-earwurm.png b/public/assets/bg-earwurm.png
deleted file mode 100644
index 7d491f5..0000000
Binary files a/public/assets/bg-earwurm.png and /dev/null differ
diff --git a/public/assets/bg-earwurm.webp b/public/assets/bg-earwurm.webp
new file mode 100644
index 0000000..7c0aa9e
Binary files /dev/null and b/public/assets/bg-earwurm.webp differ
diff --git a/public/assets/bg-fringe.png b/public/assets/bg-fringe.png
deleted file mode 100644
index 1394efa..0000000
Binary files a/public/assets/bg-fringe.png and /dev/null differ
diff --git a/public/assets/bg-fringe.webp b/public/assets/bg-fringe.webp
new file mode 100644
index 0000000..064000e
Binary files /dev/null and b/public/assets/bg-fringe.webp differ
diff --git a/public/assets/bg-na2012.png b/public/assets/bg-na2012.png
deleted file mode 100644
index 8c62b21..0000000
Binary files a/public/assets/bg-na2012.png and /dev/null differ
diff --git a/public/assets/bg-na2012.webp b/public/assets/bg-na2012.webp
new file mode 100644
index 0000000..7ba71f4
Binary files /dev/null and b/public/assets/bg-na2012.webp differ
diff --git a/public/assets/bg-north-navy.png b/public/assets/bg-north-navy.png
deleted file mode 100644
index aa94e26..0000000
Binary files a/public/assets/bg-north-navy.png and /dev/null differ
diff --git a/public/assets/bg-north-navy.webp b/public/assets/bg-north-navy.webp
new file mode 100644
index 0000000..c4ef482
Binary files /dev/null and b/public/assets/bg-north-navy.webp differ
diff --git a/public/assets/bg-northern-army.png b/public/assets/bg-northern-army.png
deleted file mode 100644
index c50bfe6..0000000
Binary files a/public/assets/bg-northern-army.png and /dev/null differ
diff --git a/public/assets/bg-northern-army.webp b/public/assets/bg-northern-army.webp
new file mode 100644
index 0000000..f32377c
Binary files /dev/null and b/public/assets/bg-northern-army.webp differ
diff --git a/public/assets/bg-polaris.png b/public/assets/bg-polaris.png
deleted file mode 100644
index aef8a5f..0000000
Binary files a/public/assets/bg-polaris.png and /dev/null differ
diff --git a/public/assets/bg-polaris.webp b/public/assets/bg-polaris.webp
new file mode 100644
index 0000000..75656a2
Binary files /dev/null and b/public/assets/bg-polaris.webp differ
diff --git a/public/assets/bg-preservation-society.png b/public/assets/bg-preservation-society.png
deleted file mode 100644
index bdc7e92..0000000
Binary files a/public/assets/bg-preservation-society.png and /dev/null differ
diff --git a/public/assets/bg-preservation-society.webp b/public/assets/bg-preservation-society.webp
new file mode 100644
index 0000000..e50166f
Binary files /dev/null and b/public/assets/bg-preservation-society.webp differ
diff --git a/public/assets/bg-tetchi.png b/public/assets/bg-tetchi.png
deleted file mode 100644
index 9895aa6..0000000
Binary files a/public/assets/bg-tetchi.png and /dev/null differ
diff --git a/public/assets/bg-tetchi.webp b/public/assets/bg-tetchi.webp
new file mode 100644
index 0000000..04841d9
Binary files /dev/null and b/public/assets/bg-tetchi.webp differ
diff --git a/public/assets/bg-yat.png b/public/assets/bg-yat.png
deleted file mode 100644
index 9c25111..0000000
Binary files a/public/assets/bg-yat.png and /dev/null differ
diff --git a/public/assets/bg-yat.webp b/public/assets/bg-yat.webp
new file mode 100644
index 0000000..0fac0f4
Binary files /dev/null and b/public/assets/bg-yat.webp differ
diff --git a/public/assets/intro-flowers.png b/public/assets/intro-flowers.png
deleted file mode 100644
index e693d77..0000000
Binary files a/public/assets/intro-flowers.png and /dev/null differ
diff --git a/public/assets/intro-flowers.webp b/public/assets/intro-flowers.webp
new file mode 100644
index 0000000..37fa613
Binary files /dev/null and b/public/assets/intro-flowers.webp differ
diff --git a/src/data/sections.ts b/src/data/sections.ts
index 472d444..fe7c4d6 100644
--- a/src/data/sections.ts
+++ b/src/data/sections.ts
@@ -4,7 +4,7 @@ const intro: SectionEntry = {
   id: 'Intro',
   name: 'Hello',
   description: 'Portfolio site of Curtis Dulmage',
-  thumbnail: '/assets/intro-flowers.png',
+  thumbnail: '/assets/intro-flowers.webp',
   channels: [140, 84, 193],
 };
 
@@ -15,7 +15,7 @@ const bodyMindChange: ProjectEntry = {
   id: 'BodyMindChange',
   name: 'Body Mind Change',
   description: 'David Cronenberg’s Body Mind Change presented by TIFF',
-  thumbnail: '/assets/bg-body-mind-change.png',
+  thumbnail: '/assets/bg-body-mind-change.webp',
   channels: [255, 65, 0],
   logo: 'LogoBodyMindChange',
   attribution: 'Rene Antunes',
@@ -31,7 +31,7 @@ const chicken: ProjectEntry = {
   id: 'Chicken',
   name: 'Chicken Farmers',
   description: 'Chicken Farmers of Canada',
-  thumbnail: '/assets/bg-chicken.png',
+  thumbnail: '/assets/bg-chicken.webp',
   channels: [248, 61, 74],
   logo: 'LogoChicken',
   attribution: 'Rene Antunes',
@@ -44,7 +44,7 @@ const commerceAwards: ProjectEntry = {
   id: 'CommerceAwards',
   name: 'Commerce Awards',
   description: 'Shopify Commerce Awards 2017',
-  thumbnail: '/assets/bg-commerce-awards.png',
+  thumbnail: '/assets/bg-commerce-awards.webp',
   channels: [156, 106, 222],
   logo: 'LogoShopify',
   url: 'https://www.siteinspire.com/websites/7422-shopify-commerce-awards-2017',
@@ -60,7 +60,7 @@ const draggable: ProjectEntry = {
   id: 'Draggable',
   name: 'Draggable',
   description: 'The drag-and-drop library your grandparents warned you about',
-  thumbnail: '/assets/bg-draggable.png',
+  thumbnail: '/assets/bg-draggable.webp',
   channels: [0, 66, 255],
   logo: 'LogoDraggable',
   url: 'https://shopify.github.io/draggable',
@@ -72,7 +72,7 @@ const earwurm: ProjectEntry = {
   id: 'Earwurm',
   name: 'Earwurm',
   description: 'Easier web audio for UI sound effects',
-  thumbnail: '/assets/bg-earwurm.png',
+  thumbnail: '/assets/bg-earwurm.webp',
   channels: [207, 1, 93],
   logo: 'LogoEarwurm',
   url: 'https://beefchimi.github.io/earwurm/',
@@ -84,7 +84,7 @@ const fringe: ProjectEntry = {
   id: 'Fringe',
   name: 'Ottawa Fringe',
   description: 'Ottawa Fringe Festival',
-  thumbnail: '/assets/bg-fringe.png',
+  thumbnail: '/assets/bg-fringe.webp',
   channels: [255, 90, 82],
   logo: 'LogoFringe',
   attribution: 'Mandira Midha',
@@ -97,7 +97,7 @@ const na2012: ProjectEntry = {
   id: 'NA2012',
   name: 'NA 2012',
   description: 'Legacy Northern Army 2012',
-  thumbnail: '/assets/bg-na2012.png',
+  thumbnail: '/assets/bg-na2012.webp',
   channels: [234, 72, 72],
   logo: 'LogoNorthernArmy',
   attribution: 'Rene Antunes',
@@ -109,7 +109,7 @@ const northernArmy: ProjectEntry = {
   id: 'NorthernArmy',
   name: 'Northern Army',
   description: 'Independent branding & packaging studio',
-  thumbnail: '/assets/bg-northern-army.png',
+  thumbnail: '/assets/bg-northern-army.webp',
   channels: [226, 172, 58],
   logo: 'LogoNorthernArmy',
   url: 'https://northernarmy.com',
@@ -122,7 +122,7 @@ const northNavy: ProjectEntry = {
   id: 'NorthNavy',
   name: 'North & Navy',
   description: 'North and Navy restaurant',
-  thumbnail: '/assets/bg-north-navy.png',
+  thumbnail: '/assets/bg-north-navy.webp',
   channels: [21, 53, 91],
   logo: 'LogoNorthNavy',
   url: 'https://northandnavy.com',
@@ -135,7 +135,7 @@ const polaris: ProjectEntry = {
   id: 'Polaris',
   name: 'Polaris',
   description: 'Shopify Polaris Styleguide',
-  thumbnail: '/assets/bg-polaris.png',
+  thumbnail: '/assets/bg-polaris.webp',
   channels: [56, 80, 177],
   logo: 'LogoShopify',
   url: 'https://polaris.shopify.com',
@@ -148,7 +148,7 @@ const preserve: ProjectEntry = {
   id: 'PreservationSociety',
   name: 'Preservation Society ',
   description: 'Northern Army Preservation Society of Canada',
-  thumbnail: '/assets/bg-preservation-society.png',
+  thumbnail: '/assets/bg-preservation-society.webp',
   channels: [255, 195, 12],
   logo: 'LogoPreservationSociety',
   url: 'https://preserve.northernarmy.com',
@@ -160,6 +160,7 @@ const sandwich: ProjectEntry = {
   id: 'SandwichVideo',
   name: 'Sandwich Video',
   description: 'Video production studio and sandwich enthusiasts',
+  // Keeping this as a PNG as it is so much smaller than the WEBP version.
   thumbnail: '/assets/bg-sandwich-video.png',
   channels: [207, 44, 71],
   logo: 'LogoSandwichVideo',
@@ -173,7 +174,7 @@ const tetchi: ProjectEntry = {
   id: 'Tetchi',
   name: 'Tetchi',
   description: 'Tribute to Tetsuro Takara',
-  thumbnail: '/assets/bg-tetchi.png',
+  thumbnail: '/assets/bg-tetchi.webp',
   channels: [2, 0, 255],
   logo: 'LogoTetchi',
   attribution: 'Curtis Dulmage',
@@ -185,7 +186,7 @@ const yat: ProjectEntry = {
   id: 'Yat',
   name: 'Yat Labs',
   description: 'Intergalactic Web 3',
-  thumbnail: '/assets/bg-yat.png',
+  thumbnail: '/assets/bg-yat.webp',
   channels: [87, 18, 222],
   logo: 'LogoYat',
   url: 'https://y.at/',