@divriots/jampack 0.8.0 → 0.8.1

package/README.md

@@ -43,8 +43,8 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 - [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)
-- [Fixes things automatically](https://jampack.divriots.com/features/autofixes)
-- [Raises warnings](https://jampack.divriots.com/features/warnings)
+- [Fix things automatically](https://jampack.divriots.com/features/autofixes)
+- [Raise warnings](https://jampack.divriots.com/features/warnings)
 
 ## Quick use
 

package/dist/compressors/images.d.ts

@@ -9,7 +9,6 @@ export type Image = {
 };
 export type ImageOutputOptions = {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'unchanged';
-    progressive?: boolean;
+    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'jpeg+progressive' | 'unchanged';
 };
 export declare function compressImage(data: Buffer, options: ImageOutputOptions): Promise<Image | undefined>;

package/dist/compressors/images.js

@@ -79,13 +79,15 @@ export async function compressImage(data, options) {
         // To format
         switch (toFormat) {
             case 'jpeg':
-                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: options.progressive } ||
-                    {});
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options } || {});
+                outputFormat = 'jpg';
+                break;
+            case 'jpeg+progressive':
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
                 outputFormat = 'jpg';
                 break;
             case 'png':
-                sharpFile = sharpFile.png({ ...config.image.png.options, progressive: options.progressive } ||
-                    {});
+                sharpFile = sharpFile.png({ ...config.image.png.options } || {});
                 outputFormat = 'png';
                 break;
             case 'webp':

package/dist/optimize.js

@@ -79,7 +79,7 @@ function getTheFold($) {
     return theFolds[theFolds.length - 1].startIndex;
 }
 async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
-    var _a;
+    var _a, _b;
     const img = $(imgElement);
     /*
      * Attribute 'src'
@@ -161,9 +161,24 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     let newImage;
     const isInPicture = (_a = img.parent()) === null || _a === void 0 ? void 0 : _a.is('picture');
     let srcToFormat = 'unchanged';
-    if (isInPicture || isAboveTheFold) {
+    if (isAboveTheFold) {
+        // Above the fold, nothing beats progressive JPEG for LCP
+        // but it's not transparent
+        if ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.hasAlpha) {
+            // TODO some images have Alpha metadata but have 0 alpha pixels
+            // We should be able to detect these to take advantage of Progressive JPEG
+            srcToFormat =
+                (await originalImage.getMime()) === 'image/avif' ||
+                    (await originalImage.getMime()) === 'image/webp'
+                    ? 'unchanged'
+                    : 'webp';
+        }
+        else {
+            srcToFormat = 'jpeg+progressive';
+        }
+    }
+    else if (isInPicture) {
         // srcToFormat should not change if in picture
-        // If above the fold, we will create progressive images
     }
     else {
         // Let's go to avif -> avif , webp -> webp, else * -> webp
@@ -178,10 +193,10 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         $state.optimizedFiles.add(originalImage.filePathAbsolute);
         newImage = await compressImage(await originalImage.getData(), {
             toFormat: srcToFormat,
-            progressive: isAboveTheFold,
         });
         if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
-            (newImage.data.length < (await originalImage.getLen()) || isAboveTheFold) // Always take the new image above to fold to benefit from progressive
+            (newImage.data.length < (await originalImage.getLen()) ||
+                srcToFormat === 'jpeg+progressive') // Progressive override all even if worse
         ) {
             // Do we need to add an new extension?
             const newExtension = `.${newImage.format}`;
@@ -275,7 +290,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         // of the srcset
     }
     else {
-        const new_srcset = await generateSrcSet(htmlfile, originalImage, attrib_src, w, h, true, imageLengthToBeatInSrcSet, { toFormat: srcToFormat, progressive: isAboveTheFold });
+        const new_srcset = await generateSrcSet(htmlfile, originalImage, img.attr('src'), imageLengthToBeatInSrcSet, { toFormat: srcToFormat });
         if (new_srcset !== null) {
             img.attr('srcset', new_srcset);
         }
@@ -289,68 +304,82 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      */
     if (isInPicture) {
         const picture = img.parent();
-        // List of possible sources to generate
-        //
-        const sourcesToGenerate = [];
-        // Only try to generate better images
-        // TODO generate more compatible formats (avif => webp/jpeg/png)
-        //
-        switch (await originalImage.getMime()) {
-            case 'image/jpeg':
-            case 'image/png':
-                sourcesToGenerate.push({
-                    mime: 'image/webp',
-                    format: 'webp',
-                });
-            case 'image/webp':
-                sourcesToGenerate.push({
-                    mime: 'image/avif',
-                    format: 'avif',
-                });
-            case 'image/avif':
-                // Nothing better
-                break;
+        if (isAboveTheFold && srcToFormat === 'jpeg+progressive') {
+            // We don't need anything else than jpeg progressive above the fold
+            const nodes = picture.children(`source`);
+            nodes.remove();
         }
-        for (const s of sourcesToGenerate) {
-            const sourceWithThisMimeType = picture.children(`source[type="${s.mime}"]`);
-            if (sourceWithThisMimeType.length > 0) {
-                // Ignore the creation of sources that already exist
-                continue;
+        else {
+            // List of possible sources to generate
+            //
+            const sourcesToGenerate = [];
+            // Only try to generate better images
+            // TODO generate more compatible formats (avif => webp/jpeg/png)
+            //
+            switch (await originalImage.getMime()) {
+                case 'image/jpeg':
+                case 'image/png':
+                    sourcesToGenerate.push({
+                        mime: 'image/webp',
+                        format: 'webp',
+                    });
+                case 'image/webp':
+                    sourcesToGenerate.push({
+                        mime: 'image/avif',
+                        format: 'avif',
+                    });
+                case 'image/avif':
+                    // Nothing better
+                    break;
             }
-            const srcset = await generateSrcSet(htmlfile, originalImage, attrib_src, w, h, false, undefined, {
-                toFormat: s.format,
-                progressive: false, // avif or webp don't have progressive support
-            });
-            if (!srcset) {
-                // No sourceset generated
-                // Image is too small or can't be compressed better
-                continue;
+            const sizes = img.attr('sizes');
+            for (const s of sourcesToGenerate) {
+                const sourceWithThisMimeType = picture.children(`source[type="${s.mime}"]`);
+                if (sourceWithThisMimeType.length > 0) {
+                    // Ignore the creation of sources that already exist
+                    continue;
+                }
+                const srcset = await generateSrcSet(htmlfile, originalImage, undefined, undefined, {
+                    toFormat: s.format,
+                });
+                if (!srcset) {
+                    // No sourceset generated
+                    // Image is too small or can't be compressed better
+                    continue;
+                }
+                const source = `<source ${sizes ? `sizes="${sizes}"` : ''} srcset="${srcset}" type="${s.mime}">`;
+                picture.prepend(source);
             }
-            const source = `<source srcset="${srcset}" type="${s.mime}">`;
-            picture.prepend(source);
-        }
-        // Reorder sources to priority order 1)avif 2)webp
-        //
-        function popupSource(type) {
-            const nodes = picture.children(`source[type="${type}"]`);
-            picture.prepend(nodes);
+            // Reorder sources to priority order 1)avif 2)webp
+            //
+            function popupSource(type) {
+                const nodes = picture.children(`source[type="${type}"]`);
+                picture.prepend(nodes);
+            }
+            popupSource('image/webp');
+            popupSource('image/avif');
         }
-        popupSource('image/webp');
-        popupSource('image/avif');
     }
 }
-async function generateSrcSet(htmlfile, originalImage, attrib_src, imageWidth, imageHeight, startWithOriginalImage, originalImageLengthToBeat, options) {
-    const ext = path.extname(attrib_src);
-    const fullbasename = attrib_src.slice(0, -ext.length);
+async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength, options) {
+    const ext = path.extname(originalImage.src);
+    const fullbasename = originalImage.src.slice(0, -ext.length);
     const imageSrc = (addition) => `${fullbasename}${addition}${options.toFormat === 'unchanged' ? ext : '.' + options.toFormat}`;
     // Start from original image
     let new_srcset = '';
+    const meta = await originalImage.getImageMeta();
+    const imageWidth = (meta === null || meta === void 0 ? void 0 : meta.width) || 0;
+    const imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 0;
+    if (!imageWidth || !imageHeight) {
+        // Forget about srcset
+        return null;
+    }
     // Start reduction
     const step = 300; //px
     const ratio = imageWidth / imageHeight;
-    let valueW = !startWithOriginalImage ? imageWidth : imageWidth - step;
+    let valueW = !startSrc ? imageWidth : imageWidth - step;
     let valueH = Math.trunc(valueW / ratio);
-    let previousImageSize = originalImageLengthToBeat || Number.MAX_VALUE;
+    let previousImageSize = startSrcLength || Number.MAX_VALUE;
     while (valueW >= config.image.srcset_min_width) {
         const src = imageSrc(`@${valueW}w`);
         const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
@@ -383,8 +412,8 @@ async function generateSrcSet(htmlfile, originalImage, attrib_src, imageWidth, i
         valueH = Math.trunc(valueW / ratio);
     }
     if (new_srcset) {
-        return startWithOriginalImage
-            ? `${attrib_src} ${imageWidth}w` + new_srcset
+        return startSrc
+            ? `${startSrc} ${imageWidth}w` + new_srcset
             : new_srcset.slice(2);
     }
     return null;

package/package.json

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