Merge pull request #222 from ssciwr/webp

Use webp format for images

.github/workflows/deploy.yml

@@ -15,6 +15,7 @@ jobs:
         with:
           node-version: 22
           cache: "pnpm"
+      - run: sudo apt-get update -yy && sudo apt-get install -yy webp
       - run: pnpm install
       - run: pnpm run build
       - uses: JamesIves/[email protected]

README.md

@@ -44,6 +44,8 @@ Initial setup:
   - linux/macOS: `curl -fsSL https://get.pnpm.io/install.sh | sh -`
 - install website dependencies
   - `pnpm install`
+- the [cwebp](https://developers.google.com/speed/webp/download) binary is also needed to convert image files
+  - ubuntu: `sudo apt install webp`
 
 To build from source, start local http-server, open website in browser, monitor & re-build modified source files:
 

package.json

@@ -29,7 +29,6 @@
     "npm-run-all": "4.1.5",
     "shelljs": "0.8.5",
     "svgdom": "0.1.19",
-    "tiff-to-png": "2.0.2",
     "ts-loader": "9.5.1",
     "typescript": "5.7.2",
     "typescript-eslint": "^8.19.0",

scripts/build-images.mjs

@@ -1,17 +1,20 @@
 import fs from "fs";
-import ConvertTiff from "tiff-to-png";
 import { glob } from "glob";
-import shell from "shelljs";
+import path from "path";
+import { execSync } from "child_process";
 
-const image_dir = "./dist/fileadmin/templates/iwr_vis";
+const image_dir = "./dist/fileadmin/templates/iwr_vis/";
 fs.mkdirSync(image_dir, { recursive: true });
 
-// convert tif images to png & write to dist/fileadmin/iwr_vis folder
-const tifImageFiles = await glob("**/img/*.tif");
-const converter = new ConvertTiff();
-converter.convertArray(tifImageFiles, image_dir).then(console.log);
+// convert all image files to webp & write to image folder
+const images = await glob("**/img/*.*");
 
-// just copy any jpg or png images to image_dir
-shell.cp("./src/img/*.jpg", image_dir);
-shell.cp("./src/img/*.jpeg", image_dir);
-shell.cp("./src/img/*.png", image_dir);
+for (const image of images) {
+  const output = path.format({
+    root: image_dir,
+    name: path.parse(image).name,
+    ext: ".webp",
+  });
+  console.log(`${image} --> ${output}`);
+  execSync(`cwebp ${image} -o ${output} -quiet`);
+}