Convert all documentation example images to webp using sharp

build/convert-doc-images.ts

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import sharp from 'sharp';
+
+const exampleName = process.argv[2];
+const folderPath = './docs/assets/examples/';
+function listFilesInFolder(folderPath: string): string[] {
+    try {
+        // Read the contents of the folder
+        const files = fs.readdirSync(folderPath);
+        return files;
+    } catch (error) {
+        return [`Error: ${error.message}`];
+    }
+}
+
+function generateWebPImage(inputFileName: string) {
+    const outputFileName = inputFileName.replace('.png', '.webp');
+    const inputFilePath = `${folderPath}${inputFileName}`;
+    const outputFilePath = `${folderPath}${outputFileName}`;
+
+    convertToWebP(inputFilePath, outputFilePath);
+}
+
+function convertToWebP(inputFile: string, outputFile: string) {
+    sharp(inputFile)
+        .webp({quality: 90, lossless: false})
+        .toFile(outputFile)
+        .then(() => {
+            console.log(`Converted '${inputFile}' to '${outputFile}'`);
+        })
+        .catch((err) => {
+            console.log(`Error while converting '${inputFile}' to '${outputFile}'`);
+            console.log(err);
+        });
+}
+
+if (exampleName) {
+    generateWebPImage(`${exampleName}.png`);
+} else {
+    listFilesInFolder(folderPath)
+        .filter((fileName) => fileName.endsWith('.png'))
+        .forEach(generateWebPImage);
+}

build/generate-docs.ts

@@ -51,7 +51,7 @@ function generateMarkdownIndexFileOfAllExamples(indexArray: HtmlDoc[]): string {
         indexMarkdown += `
 ## [${indexArrayItem.title}](./${indexArrayItem.mdFileName})
 
-![${indexArrayItem.description}](../assets/examples/${indexArrayItem.mdFileName!.replace('.md', '.png')}){ loading=lazy }
+![${indexArrayItem.description}](../assets/examples/${indexArrayItem.mdFileName!.replace('.md', '.webp')}){ loading=lazy }
 
 ${indexArrayItem.description}
 `;

docs/README.md

@@ -59,13 +59,15 @@ Examples are written as regular html files in `test/examples`. Each example shou
 When you create a new example, you **must** make an accompanying image.
 
 1. Run `npm run generate-images <example-file-name>`. The script will take a screenshot of the map in the example and save it to `docs/assets/examples/`.
-2. Optimize the image with [compresspng](https://compresspng.com/) to reduce the file size. (Optional)
-3. Commit the image.
+1. Run `npm run convert-images <example-file-name>`. The script will convert the screenshot stored in the folder `docs/assets/examples/` to webp.
+3. Commit both images.
 
 For some examples, `npm run generate-images` does not generate an ideal image. In these cases, you can interact with the map after running the command before the screenshot is taken, or take a screenshot yourself by running the site locally with `npm start`, take a screenshot and save it in the `docs/assets/examples/` folder.
 
 To regenerate all images, run `npm run generate-images`. Note that this doesn't support interaction and examples that require manual interaction (e.g. popups) will need to be manually redone afterward. This feature is experimental and may crash before successfully generating all examples.
 
+To convert all images, run `npm run convert-images`. Note that it will take original screenshots in PNG format and regenerate/override all existing webp images stored on the `docs/assets/examples/` folder.
+
 ## Committing and Publishing Documentation
 
 When a new MapLibre GL JS release goes out the documentation will be released with it.