@divriots/jampack 0.4.2 → 0.5.1

package/README.md

@@ -51,9 +51,13 @@ npx @divriots/jampack ./dist
 
 For more options see [CLI options](https://jampack.divriots.com/cli-options).
 
-## Documentation
+<div>
+
+## What can `jampack` do?
 
-Check the [Documentation side](https://jampack.divriots.com).
+See [the list of features](https://jampack.divriots.com).
+
+</div>
 
 ## `jampack` use in the wild
 
@@ -68,28 +72,9 @@ Check the [Documentation side](https://jampack.divriots.com).
 
 ## Why is it called `jampack`?
 
-- ` jam`: From [Jamstack](https://en.wikipedia.org/wiki/Jamstack).
+- `jam`: From [Jamstack](https://en.wikipedia.org/wiki/Jamstack).
 - `pack`: Reminescent of the [Executable Packers](https://en.wikipedia.org/wiki/Executable_compression#List_of_executable_packers) from the 90s.
 
 ## License
 
 This software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).
-
-
-## Optimizations
-
-### PASS 1 - Optimizations
-
-This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
-
-| Optimization   | Technical details     | Related links | Available |
-| -------------- | --------------------- |:------------:|:---------:|
-| 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         |                       |  |  ❌  |

package/dist/compress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" resolution-mode="require"/>
 import sharp from 'sharp';
 import type { Image } from './types.js';
 export declare const compressImage: (data: Buffer, options: {

package/dist/compress.js

@@ -1,8 +1,8 @@
 import * as fs from 'fs/promises';
 import * as path from 'path';
-import { optimize as svgo } from "svgo";
+import { optimize as svgo } from 'svgo';
 import { minify as htmlminifier } from 'html-minifier-terser';
-import { minify as csso } from "csso";
+import { minify as csso } from 'csso';
 import { formatBytes } from './utils.js';
 import sharp from 'sharp';
 import swc from '@swc/core';
@@ -10,7 +10,7 @@ import $state from './state.js';
 import { globby } from 'globby';
 import config from './config.js';
 import ora from 'ora';
-import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash } from './cache.js';
+import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from './cache.js';
 async function compressJS(code) {
     const newjsresult = await swc.minify(code, { compress: true, mangle: true });
     return newjsresult.code;
@@ -31,6 +31,7 @@ const processFile = async (file, stats) => {
             case '.jpeg':
             case '.svg':
             case '.webp':
+            case '.avif':
                 const newImage = await compressImageFile(file);
                 if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
                     writeData = newImage.data;
@@ -39,7 +40,12 @@ const processFile = async (file, stats) => {
             case '.html':
             case '.htm':
                 const htmldata = await fs.readFile(file);
-                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: compressInlineJS, sortClassName: true, sortAttributes: true });
+                const newhtmlData = await htmlminifier(htmldata.toString(), {
+                    minifyCSS: true,
+                    minifyJS: compressInlineJS,
+                    sortClassName: true,
+                    sortAttributes: true,
+                });
                 writeData = newhtmlData;
                 break;
             case '.css':
@@ -66,7 +72,7 @@ const processFile = async (file, stats) => {
     const result = {
         action: path.extname(file),
         originalSize: stats.size,
-        compressedSize: stats.size
+        compressedSize: stats.size,
     };
     // Writedata
     if (writeData && writeData.length < result.originalSize) {
@@ -82,7 +88,7 @@ function createWebpOptions(opt) {
     return {
         nearLossless: opt.mode === 'lossless',
         quality: opt.quality,
-        effort: opt.effort
+        effort: opt.effort,
     };
 }
 export const compressImage = async (data, options) => {
@@ -108,14 +114,15 @@ export const compressImage = async (data, options) => {
         case 'svg':
             const newData = svgo(data, {
                 multipass: true,
-                plugins: [{
-                        name: "preset-default",
+                plugins: [
+                    {
+                        name: 'preset-default',
                         params: {
                             overrides: {
                                 removeViewBox: false,
                             },
                         },
-                    }
+                    },
                 ],
             });
             if (newData.error || newData.modernError) {
@@ -144,10 +151,17 @@ export const compressImage = async (data, options) => {
             doSharp = true;
             toFormat = 'unchanged'; // Don't need to convert to webP again
             break;
+        case 'avif':
+            outputFormat = 'avif';
+            // TODO but avif is already pretty optimized
+            toFormat = 'unchanged';
+            break;
     }
     if (doSharp) {
         if (toFormat === 'webp') {
-            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? config.image.webp.options_lossless : config.image.webp.options_lossly));
+            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
+                ? config.image.webp.options_lossless
+                : config.image.webp.options_lossly));
             outputFormat = 'webp';
         }
         else if (toFormat === 'pjpg') {
@@ -155,13 +169,20 @@ export const compressImage = async (data, options) => {
             outputFormat = 'jpg';
         }
         if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
-            sharpFile = sharpFile.resize({ ...options.resize, fit: 'fill', withoutEnlargement: true });
+            sharpFile = sharpFile.resize({
+                ...options.resize,
+                fit: 'fill',
+                withoutEnlargement: true,
+            });
         }
         //
         // Output image processed
         //
         // Add to cache
-        const outputImage = { format: outputFormat, data: await sharpFile.toBuffer() };
+        const outputImage = {
+            format: outputFormat,
+            data: await sharpFile.toBuffer(),
+        };
         await addToCacheCompressImage(cacheHash, outputImage);
         // Go
         return outputImage;

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 export type WebpOptions = {
     effort: number;
-    mode: 'lossless' | 'lossly';
+    mode: "lossless" | "lossly";
     quality: number;
 };
 export type Options = {

package/dist/config.js

@@ -6,27 +6,27 @@ const default_options = {
         jpeg: {
             options: {
                 quality: 80,
-                mozjpeg: true
-            }
+                mozjpeg: true,
+            },
         },
         png: {
             options: {
                 compressionLevel: 9,
-            }
+            },
         },
         webp: {
             options_lossless: {
                 effort: 4,
                 quality: 80,
-                mode: 'lossless'
+                mode: "lossless",
             },
             options_lossly: {
                 effort: 4,
                 quality: 80,
-                mode: 'lossly'
-            }
-        }
-    }
+                mode: "lossly",
+            },
+        },
+    },
 };
 const fast_options_override = {
     image: {
@@ -35,13 +35,13 @@ const fast_options_override = {
         compress: false,
         jpeg: {
             options: {
-                mozjpeg: false
-            }
+                mozjpeg: false,
+            },
         },
         png: {
             options: {
                 compressionLevel: 0,
-            }
+            },
         },
         webp: {
             options_lossless: {
@@ -49,9 +49,9 @@ const fast_options_override = {
             },
             options_lossly: {
                 effort: 0,
-            }
-        }
-    }
+            },
+        },
+    },
 };
 export function fast() {
     Object.assign(default_options, fast_options_override);

package/dist/index.js

@@ -21,11 +21,9 @@ const logo = `     __                                    __
 `;
 console.log(logo);
 const program = new Command();
+program.name('jampack').description('Static website Optimizer').version(VERSION);
 program
-    .name('jampack')
-    .description('Static website Optimizer')
-    .version(VERSION);
-program.command('pack', { isDefault: true })
+    .command('pack', { isDefault: true })
     .description('todo')
     .argument('<dir>', 'Directory to pack')
     .option('--exclude <exclude>', 'Glob to exclude')
@@ -69,26 +67,51 @@ program.parse();
 function printSummary() {
     if ($state.summary.nbFiles > 0) {
         printTitle('Summary');
-        const dataTable = [['Action', 'Compressed', 'Original', 'Compressed', 'Gain']];
+        const dataTable = [
+            ['Action', 'Compressed', 'Original', 'Compressed', 'Gain'],
+        ];
         const config = {
             columns: [
                 { alignment: 'left' },
                 { alignment: 'right' },
                 { alignment: 'right' },
                 { alignment: 'right' },
-                { alignment: 'right' }
+                { alignment: 'right' },
             ],
             drawHorizontalLine: (lineIndex, rowCount) => {
-                return lineIndex === 0 || lineIndex === 1 || lineIndex === rowCount - 1 || lineIndex === rowCount;
-            }
+                return (lineIndex === 0 ||
+                    lineIndex === 1 ||
+                    lineIndex === rowCount - 1 ||
+                    lineIndex === rowCount);
+            },
         };
+        const unCompressedDataRows = [];
         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)];
+            const gain = summary.dataLenUncompressed - summary.dataLenCompressed;
+            const row = [
+                ext,
+                `${summary.nbFilesCompressed} / ${summary.nbFiles}`,
+                formatBytes(summary.dataLenUncompressed),
+                formatBytes(summary.dataLenCompressed),
+                gain > 0 ? '-' + formatBytes(gain) : '',
+            ];
+            if (gain > 0) {
                 dataTable.push(row);
             }
+            else {
+                unCompressedDataRows.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)];
+        // Add uncompress rows at the end
+        dataTable.push(...unCompressedDataRows);
+        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));
     }
@@ -103,7 +126,7 @@ function printIssues() {
         console.log('');
         for (let [file, list] of $state.issues) {
             console.log('▶ ' + file + '\n');
-            list.forEach(issue => {
+            list.forEach((issue) => {
                 issueCount++;
                 console.log(`${kleur.bgYellow(` ${issue.type} `)} ${issue.msg}\n`);
             });

package/dist/optimize.js

@@ -1,30 +1,33 @@
-import { globby } from "globby";
-import * as path from "path";
-import * as fs from "fs/promises";
-import cheerio from "cheerio";
-import { isNumeric } from "./utils.js";
-import config from "./config.js";
-import { compressImage } from "./compress.js";
-import svgToMiniDataURI from "mini-svg-data-uri";
-import $state from "./state.js";
-import kleur from "kleur";
-import ora from "ora";
-import { isLocal, Resource, translateSrc } from "./utils/resource.js";
+import { globby } from 'globby';
+import * as path from 'path';
+import * as fs from 'fs/promises';
+import cheerio from 'cheerio';
+import { isNumeric } from './utils.js';
+import config from './config.js';
+import { compressImage } from './compress.js';
+import svgToMiniDataURI from 'mini-svg-data-uri';
+import $state from './state.js';
+import kleur from 'kleur';
+import ora from 'ora';
+import { isLocal, Resource, translateSrc } from './utils/resource.js';
 async function analyse(file) {
-    console.log("▶ " + file);
+    console.log('▶ ' + file);
     const html = (await fs.readFile(path.join($state.dir, file))).toString();
-    const $ = cheerio.load(html, { withStartIndices: true, decodeEntities: false });
+    const $ = cheerio.load(html, {
+        withStartIndices: true,
+        decodeEntities: false,
+    });
     const theFold = getTheFold($);
-    const imgs = $("img");
+    const imgs = $('img');
     const imgsArray = [];
     imgs.each(async (index, imgElement) => {
         imgsArray.push(imgElement);
     });
     // Process images sequentially
-    const spinnerImg = ora({ prefixText: " " }).start();
+    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")} `);
+        spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr('src')} `);
         const isAboveTheFold = imgElement.startIndex < theFold;
         await processImage(file, $, imgElement, isAboveTheFold);
     }
@@ -34,21 +37,21 @@ async function analyse(file) {
     const issues = $state.issues.get(file);
     if (issues) {
         spinnerImg.fail();
-        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? "s" : ""}`));
+        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? 's' : ''}`));
     }
     else {
         spinnerImg.succeed();
     }
     // Remove the fold
     if (theFold) {
-        $("the-fold").remove();
+        $('the-fold').remove();
     }
     if (!$state.args.nowrite) {
         await fs.writeFile(path.join($state.dir, file), $.html());
     }
 }
 function getTheFold($) {
-    const theFolds = $("the-fold");
+    const theFolds = $('the-fold');
     if (!theFolds[0]) {
         return 0;
     }
@@ -61,10 +64,10 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'src'
          */
-        const attrib_src = img.attr("src");
+        const attrib_src = img.attr('src');
         if (!attrib_src) {
             $state.reportIssue(htmlfile, {
-                type: "warn",
+                type: 'warn',
                 msg: `Missing [src] on img - processing skipped.`,
             });
             return;
@@ -72,15 +75,15 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'alt'
          */
-        const attrib_alt = img.attr("alt");
+        const attrib_alt = img.attr('alt');
         if (attrib_alt === undefined) {
             $state.reportIssue(htmlfile, {
-                type: "a11y",
+                type: 'a11y',
                 msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.`,
             });
-            img.attr("alt", "");
+            img.attr('alt', '');
         }
-        if (attrib_src.startsWith("data:")) {
+        if (attrib_src.startsWith('data:')) {
             // Data URI image
             // TODO: try to compress it
             return;
@@ -88,26 +91,26 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'loading'
          */
-        const attr_loading = img.attr("loading");
+        const attr_loading = img.attr('loading');
         if (isAboveTheFold) {
-            img.removeAttr("loading");
-            img.attr("fetchpriority", "high");
+            img.removeAttr('loading');
+            img.attr('fetchpriority', 'high');
         }
         else {
             switch (attr_loading) {
                 case undefined:
                     // Go lazy by default
-                    img.attr("loading", "lazy");
+                    img.attr('loading', 'lazy');
                     break;
-                case "eager":
-                    img.removeAttr("loading");
+                case 'eager':
+                    img.removeAttr('loading');
                     break;
-                case "lazy":
+                case 'lazy':
                     // Don't touch it
                     break;
                 default:
                     $state.reportIssue(htmlfile, {
-                        type: "invalid",
+                        type: 'invalid',
                         msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"`,
                     });
             }
@@ -115,7 +118,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'decoding'
          */
-        img.attr("decoding", "async");
+        img.attr('decoding', 'async');
         if (!isLocal(attrib_src)) {
             // Image not local, don't touch it
             return;
@@ -127,34 +130,37 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         // No file -> give up
         if (!originalImage) {
             $state.reportIssue(htmlfile, {
-                type: "erro",
+                type: 'erro',
                 msg: `Can't find img on disk src="${attrib_src}"`,
             });
             return;
         }
         /*
-         * Compress image to WebP
+         * Compress image
          */
         let newImage;
+        const originalImageMeta = await originalImage.getImageMeta();
+        const canBeProgressiveJpeg = isAboveTheFold && originalImageMeta && !originalImageMeta.hasAlpha;
         if (!$state.optimizedFiles.has(originalImage.filePathAbsolute)) {
             // Let's avoid to optimize same images twice
             $state.optimizedFiles.add(originalImage.filePathAbsolute);
             newImage = await compressImage(await originalImage.getData(), {
-                toFormat: isAboveTheFold ? "pjpg" : "webp",
+                toFormat: canBeProgressiveJpeg ? 'pjpg' : 'webp',
             });
             if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
                 (newImage.data.length < (await originalImage.getLen()) ||
-                    isAboveTheFold) // Progressive jpg above the fold should get replaced even if bigger
+                    canBeProgressiveJpeg) // Progressive jpg above the fold should get replaced even if bigger
             ) {
                 // Do we need to add an new extension?
                 const newExtension = `.${newImage.format}`;
                 const additionalExtension = path.extname(originalImage.filePathAbsolute) === newExtension
-                    ? ""
+                    ? ''
                     : newExtension;
                 const newFilename = originalImage.filePathAbsolute + additionalExtension;
                 if (!$state.args.nowrite) {
                     fs.writeFile(newFilename, newImage.data);
                 }
+                // Mark new file as optimized
                 $state.compressedFiles.add(newFilename);
                 // Report compression result
                 $state.reportSummary({
@@ -164,7 +170,15 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                     originalSize: await originalImage.getLen(),
                     compressedSize: newImage.data.length,
                 });
-                img.attr("src", attrib_src + additionalExtension);
+                img.attr('src', attrib_src + additionalExtension);
+            }
+            else {
+                // Report non-compression
+                $state.reportSummary({
+                    action: path.extname(originalImage.filePathAbsolute),
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: await originalImage.getLen(),
+                });
             }
         }
         /*
@@ -178,22 +192,22 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         if (newImage && newImage.data.length <= config.image.embed_size) {
             let datauri = undefined;
             switch (newImage.format) {
-                case "svg":
+                case 'svg':
                     datauri = svgToMiniDataURI(newImage.data.toString());
                     break;
-                case "webp":
-                    datauri = `data:image/webp;base64,${newImage.data.toString("base64")}`;
+                case 'webp':
+                    datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
                     break;
-                case "jpg":
-                case "png":
+                case 'jpg':
+                case 'png':
                     // TODO but not possible in current code
                     break;
             }
             if (datauri) {
                 isEmbed = true;
-                img.attr("src", datauri);
-                img.removeAttr("loading");
-                img.removeAttr("decoding");
+                img.attr('src', datauri);
+                img.removeAttr('loading');
+                img.removeAttr('decoding');
                 $state.reportSummary({
                     action: `${newImage.format}->embed`,
                     originalSize: await originalImage.getLen(),
@@ -201,24 +215,24 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                 });
             }
         }
-        /*
-         * Attribute 'width' & 'height'
-         */
-        const [w, h] = await setImageSize(img, originalImage);
         if (isEmbed) {
             // Image is embed, no need for more processing
             return;
         }
+        /*
+         * Attribute 'width' & 'height'
+         */
+        const [w, h] = await setImageSize(htmlfile, img, originalImage);
         //
         // Stop here if svg
         //
-        if ((await originalImage.getExt()) === "svg") {
+        if ((await originalImage.getExt()) === 'svg') {
             return;
         }
         /*
          * Attribute 'srcset'
          */
-        const attr_srcset = img.attr("srcset");
+        const attr_srcset = img.attr('srcset');
         if (attr_srcset) {
             // If srcset is set, don't touch it.
             // The compress pass will compress the images
@@ -228,9 +242,9 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             // Generate image set
             const ext = path.extname(attrib_src);
             const fullbasename = attrib_src.slice(0, -ext.length);
-            const imageSrc = (addition) => `${fullbasename}${addition}.webp`;
+            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? 'jpg' : 'webp'}`;
             // Start from original image
-            let new_srcset = "";
+            let new_srcset = '';
             // Start reduction
             const step = 300; //px
             const ratio = w / h;
@@ -243,7 +257,10 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                 if (!$state.compressedFiles.has(absoluteFilename)) {
                     // Add file to list avoid recompression
                     $state.compressedFiles.add(absoluteFilename);
-                    const compressedImage = await compressImage(await originalImage.getData(), { resize: { width: valueW, height: valueH }, toFormat: "webp" });
+                    const compressedImage = await compressImage(await originalImage.getData(), {
+                        resize: { width: valueW, height: valueH },
+                        toFormat: canBeProgressiveJpeg ? 'pjpg' : 'webp',
+                    });
                     if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
@@ -254,33 +271,39 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                 valueH = Math.trunc(valueW / ratio);
             }
             if (new_srcset) {
-                img.attr("srcset", `${img.attr("src")} ${w}w` + new_srcset);
+                img.attr('srcset', `${img.attr('src')} ${w}w` + new_srcset);
             }
         }
     }
     catch (e) {
         $state.reportIssue(htmlfile, {
-            type: "erro",
+            type: 'erro',
             msg: e.message ||
                 `Unexpected error while processing image: ${JSON.stringify(e)}`,
         });
     }
 }
-async function setImageSize(img, image) {
-    let width = img.attr("width");
-    let height = img.attr("height");
+async function setImageSize(htmlfile, img, image) {
+    let width = img.attr('width');
+    let height = img.attr('height');
     let width_new = undefined;
     let height_new = undefined;
     // Check valid values
     if (width !== undefined) {
         if (!isNumeric(width)) {
-            //console.warn(`Invalid width attribute "${width}" - overriding`);
+            $state.reportIssue(htmlfile, {
+                type: 'warn',
+                msg: `Invalid width attribute "${width}" format - overriding`,
+            });
             width = undefined;
         }
     }
     if (height !== undefined) {
         if (!isNumeric(height)) {
-            //console.warn(`Invalid height attribute "${height}" - overriding`);
+            $state.reportIssue(htmlfile, {
+                type: 'warn',
+                msg: `Invalid height attribute "${height}" format - overriding`,
+            });
             height = undefined;
         }
     }
@@ -301,7 +324,10 @@ async function setImageSize(img, image) {
         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.`);
+            $state.reportIssue(htmlfile, {
+                type: 'warn',
+                msg: `Image aspect ratio in HTML (${providedRatio}) differs from image aspect ratio (${imageRatio}) - fix width and height or let jampack fill them.`,
+            });
         }
         return [w, h];
     }
@@ -317,20 +343,20 @@ async function setImageSize(img, image) {
     }
     else {
         // No width or height provided - set both to image size
-        if ((await image.getExt()) === "svg") {
+        if ((await image.getExt()) === 'svg') {
             // svg with no height and width has special sizing by browsers
             // They size it inside 300x150 unless they have width and height
             // attributes
             // Load svg
             const c = cheerio.load(await image.getData(), {});
-            const svg = c("svg").first();
-            const svg_viewbox = svg.attr("viewbox"); // bug in cheerio here, should be "viewBox"
-            const svg_width = svg.attr("width");
-            const svg_height = svg.attr("height");
+            const svg = c('svg').first();
+            const svg_viewbox = svg.attr('viewbox'); // bug in cheerio here, should be "viewBox"
+            const svg_width = svg.attr('width');
+            const svg_height = svg.attr('height');
             // Calculate aspect ratio from viewbox
             let svg_aspectratio_from_viewbox = undefined;
             if (svg_viewbox) {
-                const box = svg_viewbox.split(" ");
+                const box = svg_viewbox.split(' ');
                 const w = parseInt(box[2], 10);
                 const h = parseInt(box[3], 10);
                 svg_aspectratio_from_viewbox = w / h;
@@ -378,17 +404,17 @@ async function setImageSize(img, image) {
     if (width_new !== undefined && height_new !== undefined) {
         const result_w = Math.round(width_new);
         const result_h = Math.round(height_new);
-        img.attr("width", result_w.toFixed(0));
-        img.attr("height", result_h.toFixed(0));
+        img.attr('width', result_w.toFixed(0));
+        img.attr('height', result_h.toFixed(0));
         return [result_w, result_h];
     }
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
 export async function optimize(exclude) {
-    const glob = ["**/*.{htm,html}"];
+    const glob = ['**/*.{htm,html}'];
     if (exclude)
-        glob.push("!" + exclude);
+        glob.push('!' + exclude);
     const paths = await globby(glob, { cwd: $state.dir });
     // Sequential async
     for (const file of paths) {

package/dist/state.js

@@ -9,7 +9,7 @@ export class GlobalState {
             nbFiles: 0,
             nbFilesCompressed: 0,
             dataLenCompressed: 0,
-            dataLenUncompressed: 0
+            dataLenUncompressed: 0,
         };
         this.summaryByExtension = {};
     }
@@ -27,6 +27,7 @@ export class GlobalState {
         state.summary.nbFilesCompressed += isCompressed;
         state.summary.dataLenUncompressed += r.originalSize;
         state.summary.dataLenCompressed += r.compressedSize;
+        console.log(r.action);
         if (r.action) {
             let summary = this.summaryByExtension[r.action];
             if (!summary) {
@@ -34,7 +35,7 @@ export class GlobalState {
                     nbFiles: 0,
                     nbFilesCompressed: 0,
                     dataLenUncompressed: 0,
-                    dataLenCompressed: 0
+                    dataLenCompressed: 0,
                 };
                 this.summaryByExtension[r.action] = summary;
             }
@@ -44,7 +45,6 @@ export class GlobalState {
             summary.dataLenCompressed += r.compressedSize;
         }
     }
-    ;
 }
 const state = new GlobalState();
 export default state;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" resolution-mode="require"/>
-export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | undefined;
+export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
 export type Image = {
     format: ImageFormat;
     data: Buffer;

package/dist/utils/resource.js

@@ -27,13 +27,14 @@ export class Resource {
                 case 'png':
                 case 'webp':
                 case 'tif':
+                case 'avif':
                     let sharpFile = await sharp(await this.getData(), { animated: true });
                     const meta = await sharpFile.metadata();
                     this.image_meta = {
                         width: meta.width,
                         height: meta.height,
                         isProgressive: meta.isProgressive || false,
-                        hasAlpha: meta.hasAlpha || false
+                        hasAlpha: meta.hasAlpha || false,
                     };
                     break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -49,7 +49,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_ref demo && node ./dist/index.js",
+    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc"
   },