@divriots/jampack 0.11.1 → 0.11.3

package/README.md

@@ -35,16 +35,78 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 
 `jampack` is a post-processing tool that takes the output of your [Static Site Generator (aka SSG)](https://jamstack.org/generators/) and optimizes it for best user experience and best [Core Web Vitals](https://web.dev/learn-core-web-vitals/) scores.
 
-[Read the introduction blog post](https://divriots.com/blog/introducing-jampack)
+[Read the introduction blog post](https://divriots.com/blog/introducing-jampack/)
 
 ## What can `jampack` do?
 
-- [Optimize images](https://jampack.divriots.com/features/optimize-images)
-- [Optimize assets above-the-fold](https://jampack.divriots.com/features/optimize-above-the-fold)
-- [Embed small images](https://jampack.divriots.com/features/embed-small-images)
-- [Compress all assets](https://jampack.divriots.com/features/compress-all)
-- [Fix things automatically](https://jampack.divriots.com/features/autofixes)
-- [Raise warnings](https://jampack.divriots.com/features/warnings)
+### `<img>`
+
+```html
+<img src="./redpanda.jpg" alt="Red panda">
+```
+
+becomes responsive with dimensions:
+
+```html
+<img src="./redpanda.jpg.webp" alt="Red panda" 
+     srcset="./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w, ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w, ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
+     sizes="100vw"
+     loading="lazy"
+     decoding="async"
+     width="3872" 
+     height="2592">
+```
+
+### `<picture>`
+
+```html
+<picture>
+    <img src="./redpanda.jpg" alt="Red panda">
+</picture>
+```
+
+becomes responsive with multiple formats including AVIF:
+
+```html
+<picture>
+    <source type="image/avif" srcset="./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w, ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w, ./redpanda@736w.avif 736w">
+    <source type="image/webp" srcset="./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w, ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w, ./redpanda@736w.webp 736w">
+    <img src="./redpanda.jpg" alt="Red panda" loading="lazy" decoding="async" width="1936" height="1296" srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w, ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w, ./redpanda@736w.jpg 736w" sizes="100vw">
+</picture>
+```
+
+### Above & below-the-fold
+
+`jampack` optimizes assets above-the-fold ⬆️.
+
+- Images are loaded with higher priority.
+- Images are compress as Progressive JPEG.
+- Small images are embedded in HTML.
+
+Lazy-load assets below-the-fold ⬇️.
+
+- Images and Iframes are lazy loaded.
+
+See [details](https://jampack.divriots.com/features/optimize-above-the-fold/).
+
+### All assets are compressed
+
+In a 2nd PASS, `jampack` compresses all untouched assets and keep the same name and the same format.
+
+| Extension       | Compressor            | 
+| --------------- | --------------------- | 
+| `.html`,`.htm`  | [`html-minifier-terser`](https://github.com/terser/html-minifier-terser) |   
+| `.css`          | Best of [`csso`](https://github.com/css/csso) & [`lightningCSS`](https://lightningcss.dev)  |
+| `.js`           | [`swc`](https://swc.rs/)                   |   
+| `.svg`          | [`svgo`](https://github.com/svg/svgo)                  |  
+| `.jpg`,`.jpeg`  | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+| `.png`          | [`sharp`](https://sharp.pixelplumbing.com/)                |    
+| `.webp`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+| `.avif`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+
+### And more!
+
+See [Documentation](https://jampack.divriots.com/) for all feature list and examples.
 
 ## Quick use
 
@@ -53,7 +115,7 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 npx @divriots/jampack ./dist
 ```
 
-For more options see [CLI options](https://jampack.divriots.com/cli-options).
+For more options see [CLI options](https://jampack.divriots.com/cli-options/).
 
 ## `jampack` used in the wild
 

package/dist/compressors/html.js

@@ -8,9 +8,12 @@ async function minifyJSinHTML(originalCode) {
     return originalCode;
 }
 async function minifyCSSinHTML(originalCode, type) {
+    // Don't compress media
+    if (type === 'media')
+        return originalCode;
     const originalBuffer = Buffer.from(originalCode);
     const newCSS = await compressCSS(originalBuffer, type);
-    if (newCSS && newCSS.length < originalBuffer.length)
+    if (newCSS && newCSS.length > 0 && newCSS.length < originalBuffer.length)
         return newCSS.toString();
     return originalCode;
 }

package/dist/config-default.js

@@ -1,7 +1,15 @@
 const default_options = {
+    html: {
+        add_css_reset_as: 'inline',
+    },
     image: {
         embed_size: 1500,
         srcset_min_width: 640,
+        external: {
+            process: 'download',
+            src_include: /.*/,
+            src_exclude: null,
+        },
         compress: true,
         jpeg: {
             options: {

package/dist/config-types.d.ts

@@ -4,9 +4,17 @@ export type WebpOptions = {
     quality: number;
 };
 export type Options = {
+    html: {
+        add_css_reset_as: 'inline' | 'off';
+    };
     image: {
         embed_size: number;
         srcset_min_width: number;
+        external: {
+            process: 'download' | 'add-dimensions-only' | 'off';
+            src_include: RegExp | undefined;
+            src_exclude: RegExp | null;
+        };
         compress: boolean;
         jpeg: {
             options: {

package/dist/optimize.js

@@ -79,13 +79,15 @@ async function analyse(file) {
         $('the-fold').remove();
     }
     // Add CSS to head
-    const CSS = `<style>:where(img){height:auto;}</style>`;
-    const heads = $('head');
-    if (heads.length > 0) {
-        heads.prepend(CSS);
-    }
-    else {
-        (_a = $('html')) === null || _a === void 0 ? void 0 : _a.prepend(`<head>${CSS}</head>`);
+    if (config.html.add_css_reset_as === 'inline') {
+        const CSS = `<style>:where(img){height:auto;width:auto}</style>`;
+        const heads = $('head');
+        if (heads.length > 0) {
+            heads.prepend(CSS);
+        }
+        else {
+            (_a = $('html')) === null || _a === void 0 ? void 0 : _a.prepend(`<head>${CSS}</head>`);
+        }
     }
     if (!$state.args.nowrite) {
         await fs.writeFile(path.join($state.dir, file), $.html());
@@ -122,6 +124,13 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      */
     const attrib_src = img.attr('src');
     if (!attrib_src) {
+        const attrib_data_src = img.attr('data-src');
+        if (attrib_data_src) {
+            // Contains attribute [data-src]
+            // Most likely, this is a Javascript lazy-loaded image
+            // Let's not mess with it and hope it's well done
+            return; // No warnings
+        }
         $state.reportIssue(htmlfile, {
             type: 'warn',
             msg: `Missing [src] on img - processing skipped.`,
@@ -175,9 +184,21 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      * Attribute 'decoding'
      */
     img.attr('decoding', 'async');
+    /*
+     * Check for external images
+     */
     if (!isLocal(attrib_src)) {
-        // Image not local, don't touch it
-        return;
+        switch (config.image.external.process) {
+            case 'off':
+                // Don't process external images
+                return;
+            case 'download':
+                // Download external image for local processing
+                break;
+            case 'add-dimensions-only':
+                // Only add dimensions of image
+                return;
+        }
     }
     /*
      * Loading image

package/package.json

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