compresses images with lib squoosh

package.json

@@ -12,6 +12,7 @@
     "export": "nuxt generate && rm -rf _site/* && cp -R dist/ _site/",
     "publish-ghpages": "nuxt generate",
     "fetch-data": "cd scripts && node --experimental-modules --experimental-json-modules getdata.js",
+    "compress-images": "node scripts/imageEncoding.js",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "worktree": "git checkout --orphan gh-pages && git reset --hard && git commit --allow-empty -m 'Init' && git checkout master && git worktree add _site gh-pages",
     "gh-pages": "yarn export && cd _site && git add . && git commit --amend --no-edit && git push  origin gh-pages --force",
@@ -32,27 +33,29 @@
     "gootenberg": "^1.6.2",
     "howler": "^2.2.1",
     "lazysizes": "^5.3.2",
-    "marked": "^2.0.3",
+    "marked": "^2.0.7",
     "nuxt": "^2.15.6",
     "scrollmagic": "^2.0.8",
     "topojson-client": "3",
     "vue-dragscroll": "^3.0.0",
     "vue-observe-visibility": "^1.0.0"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config": "^6.0.0",
+    "@nuxtjs/eslint-config": "^6.0.1",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@squoosh/lib": "^0.3.1",
     "babel-eslint": "^10.1.0",
-    "dompurify": "^2.2.8",
+    "dompurify": "^2.2.9",
     "dotenv": "^10.0.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "fast-glob": "^3.2.5",
     "jsdom": "^16.6.0",
     "node-fetch": "^2.6.1",
     "node-sass": "^6.0.0",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "sass-loader": "^10",
     "tachyons-sass": "^4.9.5"
   }

pages/index.vue

@@ -46,12 +46,22 @@
             >
               <div class="relative flex-basis-100">
                 <div class="img-container aspect-1">
-                  <img
-                    class="db w-100 lazyload"
-                    loading="lazy"
-                    :data-src="story.image"
-                    :alt="story.imageCaption"
-                  />
+                  <picture class="db w-100">
+                    <source
+                      type="image/webp"
+                      :data-srcset="`compressed/${story.image}.webp`"
+                    />
+                    <source
+                      type="image/jpeg"
+                      :data-srcset="`compressed/${story.image}.jpg`"
+                    />
+                    <img
+                      class="lazyload"
+                      loading="lazy"
+                      :data-src="`compressed/${story.image}.jpg`"
+                      :alt="story.imageCaption"
+                    />
+                  </picture>
                 </div>
                 <div class="f7 black absolute lh-solid pt1">
                   <p class="ma0" v-html="story.imageCaption"></p>

scripts/dataFetcher.js

@@ -76,6 +76,7 @@ function markdown2html(data) {
               'ul',
               'video',
               'source',
+              'picture',
             ],
             KEEP_CONTENT: true,
           }

scripts/imageEncoding.js

@@ -0,0 +1,63 @@
+/* eslint require-await: "error" */
+
+import fs from 'fs/promises'
+import path from 'path'
+import { ImagePool } from '@squoosh/lib'
+import fg from 'fast-glob'
+// libSquoosh uses a worker-pool under the hood
+// to parallelize all image processing.
+
+// Accepts both file paths and Buffers/TypedArrays.
+const econdeCodecs = {
+  mozjpeg: {
+    quality: 80,
+  },
+  webp: {
+    quality: 75,
+  },
+}
+
+const inputFolder = './static/images/**/*.jpg'
+const outputFolder = './static/compressed/'
+
+async function processImage(pool, imgPath) {
+  const image = pool.ingestImage(imgPath)
+
+  // Optional.
+  // await image.preprocess({
+  //   resize: {
+  //     enabled: true,
+  //     width: 128,
+  //   },
+  // });
+  await image.encode(econdeCodecs)
+
+  for (const codecName of Object.keys(econdeCodecs)) {
+    const { extension, binary } = await image.encodedWith[codecName]
+
+    const filePath = path.parse(imgPath)
+    const fileName = filePath.name
+    const dirName = filePath.dir
+
+    const dir = dirName.replace('./static/', outputFolder) // compressed folder
+
+    try {
+      await fs.access(dir)
+    } catch {
+      await fs.mkdir(dir)
+    }
+
+    await fs.writeFile(`${dir}/${fileName}.${extension}`, binary)
+  }
+}
+
+async function init() {
+  const images = await fg([inputFolder], { dot: true })
+  const imagePool = new ImagePool(5)
+  for (const imgPath of images) {
+    await processImage(imagePool, imgPath)
+  }
+  await imagePool.close()
+}
+
+init()