Working creation and display of webp and resized jpgs

.github/sharp/sharp.js

@@ -1,15 +1,37 @@
 const sharp = require('sharp');
 const fs = require('fs');
+const path = require('path');
 
-const imgDir = '../../assets/img/heroes';
+const imgDir = '../../assets/img/projects/deploying-privacy-enhancing-technologies';
+const SHARP_FORMATS = ['jpeg', 'jpg', 'png', 'webp', 'gif', 'avif', 'tiff'];
+const IMAGE_SIZES = [
+  ['s', 300],
+  ['m', 700],
+  ['l', 1000],
+  ['xl', 1500],
+  ['xxl', 2500],
+];
 
-console.log('cwd', process.cwd());
+fs.readdirSync(imgDir).map(async file => {
+  const filePath = `${imgDir}/${file}`;
+  // check if file is not an image format
+  if (!SHARP_FORMATS.includes(path.parse(filePath).ext.replace('.', ''))) return;
 
-fs.readdirSync(imgDir).forEach(file => {
-  // check if file is an image type accepted by sharp
-  if (!file.match(/.(jpg|jpeg|png|gif)$/i)) return;
+  const sharpFile = sharp(filePath);
+  const filename = path.parse(filePath).name;
+  const fileExtension = path.parse(filePath).ext;
 
-  sharp(`${imgDir}/${file}`)
-    .resize(200, 100) // width, height
-    .toFile(`${imgDir}/${file}-small.jpg`);
-  });
+  // create multiple sizes of original image
+  for (newSize of IMAGE_SIZES) {
+    const [sizeLabel, newWidth] = newSize;
+
+    sharpFile
+      .resize(newWidth) // sharp will maintain aspect ratio
+      .toFile(`${imgDir}/${filename}-${sizeLabel}${fileExtension}`);
+  }
+
+  // create webp version of original image
+  sharpFile
+    .toFormat('webp')
+    .toFile(`${imgDir}/${filename}.webp`)
+});

_layouts/project.html

@@ -30,11 +30,19 @@ <h1>{{ page.title }}</h1>
     </div>
     <div class="hero-right grid-col-5">
       <div class="hero-right-content">
-        <img
-          class="lazyload"
-          data-sizes="auto"
-          data-src="{{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner.jpg"
-          alt="{{ page.img_alt_text }}">
+        <picture>
+          <source srcset="{{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner.webp" type="image/webp">
+          <img
+            data-sizes="auto"
+            data-srcset="{{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner-s.jpg 300w,
+            {{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner-m.jpg 700w,
+            {{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner-l.jpg 1000w,
+            {{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner-xl.jpg 1500w,
+            {{ site.baseurl }}/assets/img/projects/{{ page.title | slugify }}/{{ page.title | slugify }}-banner-xxl.jpg 2500w
+            "
+            class="lazyload"
+            alt="{{ page.img_alt_text }}">
+        </picture>
       </div>
     </div>
   </div>