@divriots/jampack 0.2.1 → 0.2.3

package/README.md

@@ -39,11 +39,39 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 
 ## Optimizations
 
-Growing list of optimizations performed:
-
-| Optimization  |  Description  |
-| ------------- | ------------- |
-| todo              |   todo            |
+### PASS 1 - Optimizations
+
+This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
+
+| Optimization   | Technical details     | Related links | Available |
+| -------------- | --------------------- |:------------:|:---------:|
+| 🔽 `<img>`      |                       |             |           |
+| Optimize `png` to `WebP` | Given `foo.png`, creates a **near loss less** `foo.png.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `jpeg` to `WebP` | Given `foo.jpg`, creates a **lossly** `foo.jpg.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `svg` |  |  |  ✅  |
+| Generate responsive images and set `srcset` | Multiple smaller images are generated exclusively in `WebP` and `srcset` attribute is set accordingly.  | [web.dev](https://web.dev/patterns/web-vitals-patterns/images/responsive-images/) |  ✅  |
+| Embed small images | If optimised image size is <500 bytes, image is embed in `[src]` |  |  ✅  |
+| Set `width` and `height` if missing | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Fix `width` or `height` if not numerical | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Set lazy loading by default  | Sets `loading="lazy"` if `[loading]` is not set. | [web.dev](https://web.dev/lazy-loading-images/) |  ✅  |
+| Set async decoding by default  | Sets `decoding="async"`. |  |  ✅  |
+| Warn on missing `[alt]` | Warn on missing `alt` attribute but adds `alt=""` in case image is considered decorative. |  |  ✅  |
+| 🔽 `<picture>`  |                       |      |   |
+| - TODO         |                       |  |  ❌  |
+
+### PASS 2 - Compression
+
+This pass compresses all untouched files without changing filename or format.
+
+| Extension       | Compressor            | Some options |
+| --------------- | --------------------- | ------------ |
+| `.html`,`.htm`  | html-minifier-terser  |              |
+| `.css`          | csso                  |              |
+| `.js`           | swc                   |              |
+| `.svg`          | svgo                  |              |
+| `.jpg`,`.jpeg`  | sharp                 |              |
+| `.png`          | sharp                 |              |
+| `.webp`         | sharp                 |              | 
 
 ## Quick use
 
@@ -52,10 +80,29 @@ Growing list of optimizations performed:
 npx @divriots/jampack ./dist
 ```
 
+## CLI options
+
+| Option        | Description                    |
+| -----------   | ------------------------------ |
+| `--onlyoptim` | Only runs optimization (PASS 1) |
+| `--onlycomp`  | Only runs compression (PASS 2) |
+| `--fast`      | Go fast. Mostly no compression just checks for issues. |
+| `--fail`      | Exits with a non-zero return code if issues. |
+| `--nowrite`   | Don't write anything to disk (for testing) |
+| `--exclude`   | Files to exclude from processing. Expect glob format like `--exclude 'blog/**'` |
+
 ## Configuration
 
 No configuration yet. All defaults.
 
+## Considerations
+
+`jampack` is meant to be used with your static website as is with no particular changes but here are some things you can do to help it extract the best performance of your pages.
+
+### Add `loading="eager"` to your images above the fold
+
+`jampack` sets all images to lazy by default. But, [images above the fold should not be lazy](https://web.dev/lazy-loading-images/#effects-on-largest-contentful-paint-lcp). Just add `loading="eager"` to your images above the fold and `jampack` will treat them as high priority.
+
 ## `jampack` use in the wild
 
 - [divRIOTS.com](https://divRIOTS.com)

package/dist/compress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" resolution-mode="require"/>
 import sharp from 'sharp';
 import type { Image } from './types.js';
 export declare const compressImage: (data: Buffer, resize: sharp.ResizeOptions, toWebp?: boolean) => Promise<Image | undefined>;

package/dist/compress.js

@@ -6,27 +6,10 @@ import { minify as csso } from "csso";
 import { formatBytes } from './utils.js';
 import sharp from 'sharp';
 import swc from '@swc/core';
-import globalState from './state.js';
+import $state from './state.js';
 import { globby } from 'globby';
-import options from './options.js';
-const beginProgress = () => {
-};
-const printProgress = () => {
-    const gain = globalState.summary.dataLenUncompressed - globalState.summary.dataLenCompressed;
-    const msg = `${globalState.summary.nbFiles} files | ${formatBytes(globalState.summary.dataLenUncompressed)} → ${formatBytes(globalState.summary.dataLenCompressed)} | -${formatBytes(gain)} `;
-    if (!process.stdout.clearLine || !process.stdout.cursorTo) {
-        // In CI we don't have access to clearLine or cursorTo
-        // Just don't log any progress
-    }
-    else {
-        process.stdout.clearLine(0);
-        process.stdout.cursorTo(0);
-        process.stdout.write(msg);
-    }
-};
-const endProgress = () => {
-    process.stdout.write('\n');
-};
+import config from './config.js';
+import ora from 'ora';
 const processFile = async (file, stats) => {
     let writeData = undefined;
     try {
@@ -77,22 +60,23 @@ const processFile = async (file, stats) => {
     // Writedata
     if (writeData && writeData.length < result.originalSize) {
         result.compressedSize = writeData.length;
-        if (!globalState.args.nowrite) {
+        if (!$state.args.nowrite) {
             await fs.writeFile(file, writeData);
         }
     }
-    globalState.compressedFiles.add(file);
-    globalState.reportItem(result);
-    printProgress();
+    $state.compressedFiles.add(file);
+    $state.reportSummary(result);
 };
 function createWebpOptions(opt) {
     return {
-        nearLossless: (opt === null || opt === void 0 ? void 0 : opt.mode) === 'lossless',
-        quality: (opt === null || opt === void 0 ? void 0 : opt.quality) || 80,
-        effort: (opt === null || opt === void 0 ? void 0 : opt.effort) || 4
+        nearLossless: opt.mode === 'lossless',
+        quality: opt.quality,
+        effort: opt.effort
     };
 }
 export const compressImage = async (data, resize, toWebp = false) => {
+    if (!config.image.compress)
+        return undefined;
     let sharpFile = await sharp(data, { animated: true });
     const meta = await sharpFile.metadata();
     if (meta.pages && meta.pages > 1) {
@@ -123,7 +107,7 @@ export const compressImage = async (data, resize, toWebp = false) => {
         case 'png':
             outputFormat = 'png';
             if (!toWebp) {
-                sharpFile = sharpFile.png(options.image.png.options || {});
+                sharpFile = sharpFile.png(config.image.png.options || {});
             }
             doSharp = true;
             break;
@@ -131,20 +115,20 @@ export const compressImage = async (data, resize, toWebp = false) => {
         case 'jpg':
             outputFormat = 'jpg';
             if (!toWebp) {
-                sharpFile = sharpFile.jpeg(options.image.jpeg.options || {});
+                sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
             }
             doSharp = true;
             break;
         case 'webp':
             outputFormat = 'webp';
-            sharpFile = sharpFile.webp(createWebpOptions(options.image.webp.options_lossly) || {});
+            sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
             doSharp = true;
             toWebp = false; // Don't need to convert to webP again
             break;
     }
     if (doSharp) {
         if (toWebp) {
-            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? options.image.webp.options_lossless : options.image.webp.options_lossly));
+            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? config.image.webp.options_lossless : config.image.webp.options_lossly));
             outputFormat = 'webp';
         }
         if (resize.width && resize.height) {
@@ -159,16 +143,22 @@ const compressImageFile = async (file, toWebP = false) => {
     return compressImage(buffer, {}, toWebP);
 };
 export async function compress(exclude) {
-    beginProgress();
+    const spinner = ora(getProgressText()).start();
     const globs = ['**/**'];
     if (exclude)
         globs.push('!' + exclude);
-    const paths = await globby(globs, { cwd: globalState.dir, absolute: true });
+    const paths = await globby(globs, { cwd: $state.dir, absolute: true });
     // "Parallel" processing
     await Promise.all(paths.map(async (file) => {
-        if (!globalState.compressedFiles.has(file)) {
+        if (!$state.compressedFiles.has(file)) {
             await processFile(file, await fs.stat(file));
+            spinner.text = getProgressText();
         }
     }));
-    endProgress();
+    spinner.text = getProgressText();
+    spinner.succeed();
 }
+const getProgressText = () => {
+    const gain = $state.summary.dataLenUncompressed - $state.summary.dataLenCompressed;
+    return `${$state.summary.nbFiles} files | ${formatBytes($state.summary.dataLenUncompressed)} → ${formatBytes($state.summary.dataLenCompressed)} | -${formatBytes(gain)} `;
+};

package/dist/compressors/image.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compressors/image.js

@@ -0,0 +1 @@
+export {};

package/dist/config.d.ts

@@ -0,0 +1,30 @@
+export declare type WebpOptions = {
+    effort: number;
+    mode: 'lossless' | 'lossly';
+    quality: number;
+};
+export declare type Options = {
+    image: {
+        embed_size: number;
+        srcset_min_width: number;
+        compress: boolean;
+        jpeg: {
+            options: {
+                quality: number;
+                mozjpeg: boolean;
+            };
+        };
+        png: {
+            options: {
+                compressionLevel: number;
+            };
+        };
+        webp: {
+            options_lossless: WebpOptions;
+            options_lossly: WebpOptions;
+        };
+    };
+};
+declare const default_options: Options;
+export declare function fast(): void;
+export default default_options;

package/dist/config.js

@@ -0,0 +1,59 @@
+const default_options = {
+    image: {
+        embed_size: 400,
+        srcset_min_width: 400,
+        compress: true,
+        jpeg: {
+            options: {
+                quality: 80,
+                mozjpeg: true
+            }
+        },
+        png: {
+            options: {
+                compressionLevel: 9,
+            }
+        },
+        webp: {
+            options_lossless: {
+                effort: 4,
+                quality: 80,
+                mode: 'lossless'
+            },
+            options_lossly: {
+                effort: 4,
+                quality: 80,
+                mode: 'lossly'
+            }
+        }
+    }
+};
+const fast_options_override = {
+    image: {
+        embed_size: 0,
+        srcset_min_width: 16000,
+        compress: false,
+        jpeg: {
+            options: {
+                mozjpeg: false
+            }
+        },
+        png: {
+            options: {
+                compressionLevel: 0,
+            }
+        },
+        webp: {
+            options_lossless: {
+                effort: 0,
+            },
+            options_lossly: {
+                effort: 0,
+            }
+        }
+    }
+};
+export function fast() {
+    Object.assign(default_options, fast_options_override);
+}
+export default default_options;

package/dist/index.js

@@ -2,10 +2,13 @@
 import { Command } from 'commander';
 import { compress } from './compress.js';
 import { optimize } from './optimize.js';
-import kleur from 'kleur';
-import globalState from './state.js';
+import $state from './state.js';
 import { table } from 'table';
 import { formatBytes } from './utils.js';
+import { fast } from './config.js';
+import { printTitle } from './logger.js';
+import { exit } from 'process';
+import kleur from 'kleur';
 const logo = `     __                                    __    
     |__|____    _____ ___________    ____ |  | __
     |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /
@@ -25,42 +28,79 @@ program.command('pack', { isDefault: true })
     .argument('<dir>', 'Directory to pack')
     .option('--exclude <exclude>', 'Glob to exclude')
     .option('--nowrite', 'No write')
-    .option('--onlycomp', 'Only compress')
-    .option('--onlyoptim', 'Only optimize')
+    .option('--fast', 'Go fast. Mostly no compression just checks for issues.')
+    .option('--fail', 'Exits with a non-zero return code if issues.')
+    .option('--onlyoptim', 'Only optimize (PASS 1).')
+    .option('--onlycomp', 'Only compress (PASS 2).')
     .action(async (dir, options) => {
-    globalState.dir = dir;
-    globalState.args = options;
+    $state.dir = dir;
+    $state.args = options;
+    // Override config with fast options
+    if (options.fast) {
+        fast();
+    }
     if (!options.onlycomp) {
-        console.log('');
-        console.log(kleur.bgGreen(kleur.black(` PASS 1 - Optimizing `)));
+        printTitle('PASS 1 - Optimizing');
+        console.time('Done');
         await optimize(options.exclude);
+        console.timeEnd('Done');
     }
-    if (!options.onlyoptim) {
-        console.log('');
-        console.log(kleur.bgGreen(kleur.black(` PASS 2 - Compressing the rest`)));
+    if (!options.onlyoptim && !options.fast) {
+        printTitle('PASS 2 - Compressing the rest');
+        console.time('Done');
         await compress(options.exclude);
+        console.timeEnd('Done');
+    }
+    printSummary();
+    printIssues();
+    if (options.failOnIssues && $state.issues.size > 0) {
+        exit(1);
     }
-    printDetails();
 });
 program.parse();
-function printDetails() {
-    const dataTable = [['Action', 'Compressed', 'Original', 'Compressed', 'Gain']];
-    const config = {
-        columns: [
-            { alignment: 'left' },
-            { alignment: 'right' },
-            { alignment: 'right' },
-            { alignment: 'right' },
-            { alignment: 'right' }
-        ],
-    };
-    Object.entries(globalState.summaryByExtension).forEach(([ext, summary]) => {
-        if (summary.dataLenCompressed < summary.dataLenUncompressed) {
-            const row = [ext, `${summary.nbFilesCompressed} / ${summary.nbFiles}`, formatBytes(summary.dataLenUncompressed), formatBytes(summary.dataLenCompressed), '-' + formatBytes(summary.dataLenUncompressed - summary.dataLenCompressed)];
-            dataTable.push(row);
+function printSummary() {
+    if ($state.summary.nbFiles > 0) {
+        printTitle('Summary');
+        const dataTable = [['Action', 'Compressed', 'Original', 'Compressed', 'Gain']];
+        const config = {
+            columns: [
+                { alignment: 'left' },
+                { alignment: 'right' },
+                { alignment: 'right' },
+                { alignment: 'right' },
+                { alignment: 'right' }
+            ],
+            drawHorizontalLine: (lineIndex, rowCount) => {
+                return lineIndex === 0 || lineIndex === 1 || lineIndex === rowCount - 1 || lineIndex === rowCount;
+            }
+        };
+        Object.entries($state.summaryByExtension).forEach(([ext, summary]) => {
+            if (summary.dataLenCompressed < summary.dataLenUncompressed) {
+                const row = [ext, `${summary.nbFilesCompressed} / ${summary.nbFiles}`, formatBytes(summary.dataLenUncompressed), formatBytes(summary.dataLenCompressed), '-' + formatBytes(summary.dataLenUncompressed - summary.dataLenCompressed)];
+                dataTable.push(row);
+            }
+        });
+        const total = ['Total', `${$state.summary.nbFilesCompressed} / ${$state.summary.nbFiles}`, formatBytes($state.summary.dataLenUncompressed), formatBytes($state.summary.dataLenCompressed), '-' + formatBytes($state.summary.dataLenUncompressed - $state.summary.dataLenCompressed)];
+        dataTable.push(total);
+        console.log(table(dataTable, config));
+    }
+}
+function printIssues() {
+    let issueCount = 0;
+    if ($state.issues.size === 0) {
+        printTitle('✔ No issues');
+    }
+    else {
+        printTitle('Issues', kleur.bgRed);
+        console.log('');
+        for (let [file, list] of $state.issues) {
+            console.log(kleur.red('▶ ' + file + '\n'));
+            list.forEach(issue => {
+                issueCount++;
+                console.log(`❌ ${issue.msg}\n`);
+            });
         }
-    });
-    const total = ['Total', `${globalState.summary.nbFilesCompressed} / ${globalState.summary.nbFiles}`, formatBytes(globalState.summary.dataLenUncompressed), formatBytes(globalState.summary.dataLenCompressed), '-' + formatBytes(globalState.summary.dataLenUncompressed - globalState.summary.dataLenCompressed)];
-    dataTable.push(total);
-    console.log(table(dataTable, config));
+        console.log('');
+        printTitle(`${issueCount} issue(s) over ${$state.issues.size} files`, kleur.bgRed);
+    }
 }

package/dist/logger.d.ts

@@ -1,3 +1,9 @@
-export declare function info(message: string): void;
-export declare function warn(message: string): void;
-export declare function error(message: string): void;
+export declare class Logger {
+    private prefix;
+    Logger(prefix?: string): void;
+    debug(message: string): void;
+    info(message: string): void;
+    warn(message: string): void;
+    error(message: string): void;
+}
+export declare function printTitle(msg: string, bgColor?: (x: string | number) => string): void;

package/dist/logger.js

@@ -1,9 +1,25 @@
-export function info(message) {
-    console.info(message);
+import kleur from 'kleur';
+export class Logger {
+    constructor() {
+        this.prefix = '';
+    }
+    Logger(prefix = '') {
+        this.prefix = prefix;
+    }
+    debug(message) {
+        console.debug(this.prefix + message);
+    }
+    info(message) {
+        console.info(this.prefix + message);
+    }
+    warn(message) {
+        console.warn(this.prefix + message);
+    }
+    error(message) {
+        console.error(this.prefix + message);
+    }
 }
-export function warn(message) {
-    console.warn(message);
-}
-export function error(message) {
-    console.error(message);
+export function printTitle(msg, bgColor = kleur.bgGreen) {
+    console.log('');
+    console.log(kleur.black(bgColor(` ${msg} `)));
 }

package/dist/optimize.js

@@ -4,13 +4,15 @@ import * as fs from 'fs/promises';
 import cheerio from 'cheerio';
 import { isLocal, isNumeric, translateSrc } from './utils.js';
 import sharp from "sharp";
-import options from './options.js';
+import config from './config.js';
 import { compressImage } from './compress.js';
 import svgToMiniDataURI from 'mini-svg-data-uri';
-import globalState from './state.js';
+import $state from './state.js';
+import kleur from 'kleur';
+import ora from 'ora';
 async function analyse(file) {
-    console.log('Processing ' + file);
-    const html = (await fs.readFile(path.join(globalState.dir, file))).toString();
+    console.log('▶ ' + file);
+    const html = (await fs.readFile(path.join($state.dir, file))).toString();
     const $ = cheerio.load(html, {});
     const imgs = $('img');
     const imgsArray = [];
@@ -18,34 +20,46 @@ async function analyse(file) {
         imgsArray.push(imgElement);
     });
     // Process images sequentially
-    await imgsArray.reduce(async (previousPromise, imgElement) => {
-        await previousPromise;
-        return processImage(file, $, imgElement);
-    }, Promise.resolve());
-    if (!globalState.args.nowrite) {
-        await fs.writeFile(path.join(globalState.dir, file), $.html());
+    const spinnerImg = ora({ prefixText: ' ' }).start();
+    for (let i = 0; i < imgsArray.length; i++) {
+        const imgElement = imgsArray[i];
+        spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr('src')} `);
+        await processImage(file, $, imgElement);
+    }
+    // Reset spinner
+    spinnerImg.text = kleur.dim(`<img> [${imgsArray.length}/${imgsArray.length}]`);
+    // Notify issues
+    const issues = $state.issues.get(file);
+    if (issues) {
+        spinnerImg.fail();
+        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? 's' : ''}`));
+    }
+    else {
+        spinnerImg.succeed();
+    }
+    if (!$state.args.nowrite) {
+        await fs.writeFile(path.join($state.dir, file), $.html());
     }
 }
-async function processImage(file, $, imgElement) {
+async function processImage(htmlfile, $, imgElement) {
     try {
         const img = $(imgElement);
         /*
-        * Attribute 'alt'
-        */
-        const attrib_alt = img.attr('alt');
-        if (attrib_alt === undefined) {
-            console.warn('<img> has no alt attribute - adding an empty but you should fix it');
-            img.attr('alt', "");
-        }
-        /*
         * Attribute 'src'
         */
         const attrib_src = img.attr('src');
-        console.log(`- Image ${attrib_src}`);
         if (!attrib_src) {
-            console.warn('<img> has no src attribute');
+            $state.reportIssue(htmlfile, { msg: `Missing [src] on img - processing skipped.` });
             return;
         }
+        /*
+        * Attribute 'alt'
+        */
+        const attrib_alt = img.attr('alt');
+        if (attrib_alt === undefined) {
+            $state.reportIssue(htmlfile, { msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.` });
+            img.attr('alt', "");
+        }
         if (attrib_src.startsWith('data:')) {
             // Data URI image
             // TODO: try to compress it
@@ -71,7 +85,7 @@ async function processImage(file, $, imgElement) {
                 // Don't touch it
                 break;
             default:
-                console.warn(`Invalid loading attribute ${attr_loading}`);
+                $state.reportIssue(htmlfile, { msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"` });
         }
         /*
         * Attribute 'decoding'
@@ -80,37 +94,38 @@ async function processImage(file, $, imgElement) {
         /*
         * Loading image
         */
-        const absoluteImgPath = translateSrc(globalState.dir, path.dirname(file), attrib_src);
+        const absoluteImgPath = translateSrc($state.dir, path.dirname(htmlfile), attrib_src);
         // file exists?
         try {
             await fs.stat(absoluteImgPath);
         }
         catch (e) {
-            console.error(`Missing img ${absoluteImgPath}`);
+            $state.reportIssue(htmlfile, { msg: `Can't find img src="${attrib_src}" in ${absoluteImgPath}` });
             return;
         }
+        // Read file
+        const originalData = await fs.readFile(absoluteImgPath);
         const sharpFile = sharp(absoluteImgPath);
         const meta = await sharpFile.metadata();
-        const originalData = await fs.readFile(absoluteImgPath);
         /*
          * Compress image to WebP
          */
         let newImage;
-        if (!globalState.optimizedFiles.has(absoluteImgPath)) {
+        if (!$state.optimizedFiles.has(absoluteImgPath)) {
             // Let's avoid to optimize same images twice
-            globalState.optimizedFiles.add(absoluteImgPath);
+            $state.optimizedFiles.add(absoluteImgPath);
             newImage = await compressImage(originalData, {}, true);
             if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < originalData.length) {
                 // Do we need to add an new extension?
                 const newExtension = `.${newImage.format}`;
                 const additionalExtension = path.extname(absoluteImgPath) === newExtension ? '' : newExtension;
                 const newFilename = absoluteImgPath + additionalExtension;
-                if (!globalState.args.nowrite) {
+                if (!$state.args.nowrite) {
                     fs.writeFile(newFilename, newImage.data);
                 }
-                globalState.compressedFiles.add(newFilename);
+                $state.compressedFiles.add(newFilename);
                 // Report compression result
-                globalState.reportItem({
+                $state.reportSummary({
                     action: (newFilename !== absoluteImgPath) ? `${meta.format}->${newImage.format}` : path.extname(absoluteImgPath),
                     originalSize: originalData.length,
                     compressedSize: newImage.data.length
@@ -126,7 +141,7 @@ async function processImage(file, $, imgElement) {
          * image if it fits the size.
          */
         let isEmbed = false;
-        if (newImage && newImage.data.length <= options.image.embed_size) {
+        if (newImage && newImage.data.length <= config.image.embed_size) {
             let datauri = undefined;
             switch (newImage.format) {
                 case 'svg':
@@ -145,9 +160,17 @@ async function processImage(file, $, imgElement) {
                 img.attr('src', datauri);
                 img.removeAttr('loading');
                 img.removeAttr('decoding');
-                globalState.reportItem({ action: `${newImage.format}->embed`, originalSize: originalData.length, compressedSize: newImage.data.length });
+                $state.reportSummary({ action: `${newImage.format}->embed`, originalSize: originalData.length, compressedSize: newImage.data.length });
             }
         }
+        /*
+         * Attribute 'width' & 'height'
+         */
+        const [w, h] = setImageSize(img, meta);
+        if (w < 0 || h < 0) {
+            $state.reportIssue(htmlfile, { msg: `Unexpected error in image size calculation src="${attrib_src}" - can't performance some optmizations.` });
+            return;
+        }
         if (isEmbed) {
             // Image is embed, no need for more processing
             return;
@@ -157,14 +180,6 @@ async function processImage(file, $, imgElement) {
         //
         if (meta.format === 'svg')
             return;
-        /*
-         * Attribute 'width' & 'height'
-         */
-        const [w, h] = setImageSize(img, meta);
-        if (w < 0 || h < 0) {
-            console.warn(`Unexpected error in image size calculation - some optimizations can't be done`);
-            return;
-        }
         /*
          * Attribute 'srcset'
          */
@@ -186,16 +201,15 @@ async function processImage(file, $, imgElement) {
             const ratio = w / h;
             let valueW = w - step;
             let valueH = Math.trunc(valueW / ratio);
-            while (valueW > options.image.srcset_min_width) {
+            while (valueW > config.image.srcset_min_width) {
                 const src = imageSrc(`@${valueW}w`);
-                console.log(`Generating srcset ${src}`);
-                const absoluteFilename = translateSrc(globalState.dir, path.dirname(file), src);
+                const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
                 // Don't generate srcset file twice
-                if (!globalState.compressedFiles.has(absoluteFilename)) {
+                if (!$state.compressedFiles.has(absoluteFilename)) {
                     // Add file to list avoid recompression
-                    globalState.compressedFiles.add(absoluteFilename);
+                    $state.compressedFiles.add(absoluteFilename);
                     const compressedImage = await compressImage(originalData, { width: valueW, height: valueH }, true);
-                    if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !globalState.args.nowrite) {
+                    if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
                 }
@@ -210,10 +224,7 @@ async function processImage(file, $, imgElement) {
         }
     }
     catch (e) {
-        console.error('Error while processing image');
-        console.error(e);
-        // exit here
-        // exit(1);
+        $state.reportIssue(htmlfile, { msg: `Unexpected error while processing image: ${JSON.stringify(e)}` });
     }
 }
 function setImageSize(img, meta) {
@@ -224,13 +235,13 @@ function setImageSize(img, meta) {
     // Check valid values
     if (width !== undefined) {
         if (!isNumeric(width)) {
-            console.warn(`Invalid width attribute "${width}" - overriding`);
+            //console.warn(`Invalid width attribute "${width}" - overriding`);
             width = undefined;
         }
     }
     if (height !== undefined) {
         if (!isNumeric(height)) {
-            console.warn(`Invalid height attribute "${height}" - overriding`);
+            //console.warn(`Invalid height attribute "${height}" - overriding`);
             height = undefined;
         }
     }
@@ -247,7 +258,7 @@ function setImageSize(img, meta) {
         const providedRatio = Math.round(w / h * 10) / 10;
         const imageRatio = Math.round(originalRatio * 10) / 10;
         if (providedRatio !== imageRatio) {
-            console.warn(`Image aspect ratio in HTML (${providedRatio}) differs from image aspect ratio (${imageRatio}) - fix width and height or let jampack fill them.`);
+            //console.warn(`Image aspect ratio in HTML (${providedRatio}) differs from image aspect ratio (${imageRatio}) - fix width and height or let jampack fill them.`);
         }
         return [w, h];
     }
@@ -279,10 +290,10 @@ export async function optimize(exclude) {
     const glob = ['**/*.{htm,html}'];
     if (exclude)
         glob.push('!' + exclude);
-    const paths = await globby(glob, { cwd: globalState.dir });
+    const paths = await globby(glob, { cwd: $state.dir });
     // Sequential async
-    await paths.reduce(async (previousPromise, item) => {
-        await previousPromise;
-        return analyse(item);
-    }, Promise.resolve());
+    for (const file of paths) {
+        await analyse(file);
+    }
+    ;
 }

package/dist/optimizers/img.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/optimizers/img.js

@@ -0,0 +1 @@
+export {};

package/dist/options.d.ts

@@ -1,7 +1,7 @@
 export declare type WebpOptions = {
-    effort?: number;
-    mode?: 'lossless' | 'lossly';
-    quality?: number;
+    effort: number;
+    mode: 'lossless' | 'lossly';
+    quality: number;
 };
 export declare type Options = {
     image: {
@@ -9,21 +9,22 @@ export declare type Options = {
         srcset_min_width: number;
         srcset_max_width: number;
         jpeg: {
-            options?: {
-                quality?: number;
-                mozjpeg?: boolean;
+            options: {
+                quality: number;
+                mozjpeg: boolean;
             };
         };
         png: {
-            options?: {
-                compressionLevel?: number;
+            options: {
+                compressionLevel: number;
             };
         };
         webp: {
-            options_lossless?: WebpOptions;
-            options_lossly?: WebpOptions;
+            options_lossless: WebpOptions;
+            options_lossly: WebpOptions;
         };
     };
 };
 declare const default_options: Options;
+export declare function fast(): void;
 export default default_options;

package/dist/options.js

@@ -28,4 +28,32 @@ const default_options = {
         }
     }
 };
+const fast_options_override = {
+    image: {
+        embed_size: 0,
+        srcset_min_width: 1024,
+        srcset_max_width: 1024,
+        jpeg: {
+            options: {
+                mozjpeg: false
+            }
+        },
+        png: {
+            options: {
+                compressionLevel: 0,
+            }
+        },
+        webp: {
+            options_lossless: {
+                effort: 0,
+            },
+            options_lossly: {
+                effort: 0,
+            }
+        }
+    }
+};
+export function fast() {
+    Object.assign(default_options, fast_options_override);
+}
 export default default_options;

package/dist/state.d.ts

@@ -6,20 +6,25 @@ export declare type ReportItem = {
     originalSize: number;
     compressedSize: number;
 };
-export declare type Summary = {
+declare type Summary = {
     nbFiles: number;
     nbFilesCompressed: number;
     dataLenUncompressed: number;
     dataLenCompressed: number;
 };
+declare type Issue = {
+    msg: string;
+};
 export declare class GlobalState {
     dir: string;
     args: Args;
     compressedFiles: Set<string>;
     optimizedFiles: Set<string>;
+    issues: Map<string, Issue[]>;
     summary: Summary;
     summaryByExtension: Record<string, Summary>;
-    reportItem(r: ReportItem): void;
+    reportIssue(sourceFile: string, issue: Issue): void;
+    reportSummary(r: ReportItem): void;
 }
 declare const state: GlobalState;
 export default state;

package/dist/state.js

@@ -4,6 +4,7 @@ export class GlobalState {
         this.args = {};
         this.compressedFiles = new Set();
         this.optimizedFiles = new Set();
+        this.issues = new Map();
         this.summary = {
             nbFiles: 0,
             nbFilesCompressed: 0,
@@ -12,7 +13,15 @@ export class GlobalState {
         };
         this.summaryByExtension = {};
     }
-    reportItem(r) {
+    reportIssue(sourceFile, issue) {
+        let issueList = this.issues.get(sourceFile);
+        if (issueList === undefined) {
+            issueList = [];
+            this.issues.set(sourceFile, issueList);
+        }
+        issueList.push(issue);
+    }
+    reportSummary(r) {
         const isCompressed = r.compressedSize < r.originalSize ? 1 : 0;
         this.summary.nbFiles++;
         state.summary.nbFilesCompressed += isCompressed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -16,23 +16,25 @@
     "/dist"
   ],
   "dependencies": {
-    "@swc/core": "^1.3.3",
+    "@swc/core": "^1.3.4",
     "@types/cheerio": "^0.22.31",
     "@types/commander": "^2.12.2",
     "@types/csso": "^5.0.0",
     "@types/html-minifier-terser": "^7.0.0",
+    "@types/ora": "^3.2.0",
     "@types/sharp": "^0.31.0",
     "@types/svgo": "^2.6.4",
     "@types/table": "^6.3.2",
     "chalk": "^5.0.1",
     "cheerio": "0.22.0",
-    "commander": "^9.4.0",
+    "commander": "^9.4.1",
     "csso": "^5.0.5",
     "globby": "^13.1.2",
     "html-minifier-terser": "^7.0.0",
     "kleur": "^4.1.5",
     "mini-svg-data-uri": "^1.4.4",
-    "sharp": "^0.31.0",
+    "ora": "^6.1.2",
+    "sharp": "^0.31.1",
     "svgo": "^2.8.0",
     "table": "^6.8.0"
   },
@@ -41,7 +43,7 @@
     "shx": "^0.3.3",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "watch": "pnpm build --watch",