🍱 [Projects] Replace most PNGs with WEBP

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/',