@divriots/jampack 0.4.2 → 0.5.0

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/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/optimize.js

@@ -13,7 +13,10 @@ import { isLocal, Resource, translateSrc } from "./utils/resource.js";
 async function analyse(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 imgsArray = [];
@@ -133,18 +136,20 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             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}`;
@@ -201,14 +206,14 @@ 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
         //
@@ -228,7 +233,7 @@ 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 = "";
             // Start reduction
@@ -243,7 +248,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);
                     }
@@ -266,7 +274,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         });
     }
 }
-async function setImageSize(img, image) {
+async function setImageSize(htmlfile, img, image) {
     let width = img.attr("width");
     let height = img.attr("height");
     let width_new = undefined;
@@ -274,13 +282,19 @@ async function setImageSize(img, image) {
     // 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 +315,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];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {