@divriots/jampack 0.7.2 → 0.8.0

package/README.md

@@ -35,12 +35,16 @@ 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.
 
-## Why `jampack`?
+[Read the introduction blog post](https://divriots.com/blog/introducing-jampack)
 
-- **Better user experience** for your website visitors. Specially on low-end devices.
-- **Better SEO**. Page experience now [affects ranking](https://developers.google.com/search/docs/appearance/page-experience).
-- **Easier maintenance**. Generating top performance webpages requires extra engineering in the composition of the pages that is counterproductive with the maintenance of the website.
-- **Time saving**. Spend less time optimizing and let `jampack` perform the heaving-lifting for you.
+## 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)
+- [Fixes things automatically](https://jampack.divriots.com/features/autofixes)
+- [Raises warnings](https://jampack.divriots.com/features/warnings)
 
 ## Quick use
 
@@ -51,15 +55,7 @@ npx @divriots/jampack ./dist
 
 For more options see [CLI options](https://jampack.divriots.com/cli-options).
 
-<div>
-
-## What can `jampack` do?
-
-See [the list of features](https://jampack.divriots.com).
-
-</div>
-
-## `jampack` use in the wild
+## `jampack` used in the wild
 
 - [divRIOTS.com](https://divRIOTS.com)
 - [Backlight.dev](https://backlight.dev)
@@ -70,7 +66,9 @@ See [the list of features](https://jampack.divriots.com).
 - [Components.studio](https://components.studio)
 - [keycloak.ch](https://keycloak.ch)
 - [bayjs.org](https://bayjs.org/)
-
+- [qwind.pages.dev](https://qwind.pages.dev/)
+- [Bloycey's Blog](https://bloycey.blog/)
+  
 > Add yours here
 
 ## Why is it called `jampack`?

package/dist/compressors/images.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="node" resolution-mode="require"/>
 import sharp from 'sharp';
+import { MimeType } from 'file-type';
+export type ImageMimeType = MimeType | 'image/svg+xml';
 export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
 export type Image = {
     format: ImageFormat;
     data: Buffer;
 };
-export declare function compressImage(data: Buffer, options: {
+export type ImageOutputOptions = {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'pjpg' | 'avif' | 'unchanged';
-}): Promise<Image | undefined>;
+    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'unchanged';
+    progressive?: boolean;
+};
+export declare function compressImage(data: Buffer, options: ImageOutputOptions): Promise<Image | undefined>;

package/dist/compressors/images.js

@@ -48,6 +48,10 @@ export async function compressImage(data, options) {
         }
         return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
     }
+    // TODO
+    // Use information of input image to the destination format
+    // - Progressive (unless overriden)
+    // - Lossless
     // The bitmap images
     if (toFormat === 'unchanged') {
         switch (meta.format) {
@@ -64,8 +68,9 @@ export async function compressImage(data, options) {
                 sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
                 outputFormat = 'webp';
                 break;
+            case 'heif':
             case 'avif':
-                sharpFile = sharpFile.avif();
+                sharpFile = sharpFile.avif({ effort: 4, quality: 50 }); // TODO create config for avif
                 outputFormat = 'avif';
                 break;
         }
@@ -73,10 +78,16 @@ export async function compressImage(data, options) {
     else {
         // To format
         switch (toFormat) {
-            case 'pjpg':
-                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+            case 'jpeg':
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: options.progressive } ||
+                    {});
                 outputFormat = 'jpg';
                 break;
+            case 'png':
+                sharpFile = sharpFile.png({ ...config.image.png.options, progressive: options.progressive } ||
+                    {});
+                outputFormat = 'png';
+                break;
             case 'webp':
                 sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
                     ? config.image.webp.options_lossless
@@ -84,7 +95,10 @@ export async function compressImage(data, options) {
                 outputFormat = 'webp';
                 break;
             case 'avif':
-                sharpFile = sharpFile.avif({ effort: 6 });
+                sharpFile = sharpFile.avif({
+                    effort: 4,
+                    quality: meta.format === 'png' ? 80 : 60, // don't use lossless avif it doesn't compress well in most png uses cases
+                });
                 outputFormat = 'avif';
                 break;
         }

package/dist/config.js

@@ -5,7 +5,7 @@ const default_options = {
         compress: true,
         jpeg: {
             options: {
-                quality: 80,
+                quality: 75,
                 mozjpeg: true,
             },
         },
@@ -17,12 +17,12 @@ const default_options = {
         webp: {
             options_lossless: {
                 effort: 4,
-                quality: 80,
+                quality: 77,
                 mode: 'lossless',
             },
             options_lossly: {
                 effort: 4,
-                quality: 80,
+                quality: 77,
                 mode: 'lossly',
             },
         },

package/dist/optimize.js

@@ -4,7 +4,7 @@ import * as fs from 'fs/promises';
 import cheerio from 'cheerio';
 import { isNumeric } from './utils.js';
 import config from './config.js';
-import { compressImage } from './compressors/images.js';
+import { compressImage, } from './compressors/images.js';
 import svgToMiniDataURI from 'mini-svg-data-uri';
 import $state from './state.js';
 import kleur from 'kleur';
@@ -30,7 +30,16 @@ async function analyse(file) {
         const imgElement = imgsArray[i];
         spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr('src')} `);
         const isAboveTheFold = imgElement.startIndex < theFold;
-        await processImage(file, $, imgElement, isAboveTheFold);
+        try {
+            await processImage(file, $, imgElement, isAboveTheFold);
+        }
+        catch (e) {
+            $state.reportIssue(file, {
+                type: 'erro',
+                msg: e.message ||
+                    `Unexpected error while processing image: ${JSON.stringify(e)}`,
+            });
+        }
     }
     // Reset spinner
     spinnerImg.text = kleur.dim(`<img> [${imgsArray.length}/${imgsArray.length}]`);
@@ -65,258 +74,320 @@ function getTheFold($) {
     if (!theFolds[0]) {
         return 0;
     }
+    // Pickup the position of the last `<the-fold>`
     // @ts-ignore
-    return theFolds[0].startIndex;
+    return theFolds[theFolds.length - 1].startIndex;
 }
 async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
-    try {
-        const img = $(imgElement);
-        /*
-         * Attribute 'src'
-         */
-        const attrib_src = img.attr('src');
-        if (!attrib_src) {
-            $state.reportIssue(htmlfile, {
-                type: 'warn',
-                msg: `Missing [src] on img - processing skipped.`,
+    var _a;
+    const img = $(imgElement);
+    /*
+     * Attribute 'src'
+     */
+    const attrib_src = img.attr('src');
+    if (!attrib_src) {
+        $state.reportIssue(htmlfile, {
+            type: 'warn',
+            msg: `Missing [src] on img - processing skipped.`,
+        });
+        return;
+    }
+    /*
+     * Attribute 'alt'
+     */
+    const attrib_alt = img.attr('alt');
+    if (attrib_alt === undefined) {
+        $state.reportIssue(htmlfile, {
+            type: 'a11y',
+            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
+        return;
+    }
+    /*
+     * Attribute 'loading'
+     */
+    const attr_loading = img.attr('loading');
+    if (isAboveTheFold) {
+        img.removeAttr('loading');
+        img.attr('fetchpriority', 'high');
+    }
+    else {
+        switch (attr_loading) {
+            case undefined:
+                // Go lazy by default
+                img.attr('loading', 'lazy');
+                break;
+            case 'eager':
+                img.removeAttr('loading');
+                break;
+            case 'lazy':
+                // Don't touch it
+                break;
+            default:
+                $state.reportIssue(htmlfile, {
+                    type: 'invalid',
+                    msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"`,
+                });
+        }
+    }
+    /*
+     * Attribute 'decoding'
+     */
+    img.attr('decoding', 'async');
+    if (!isLocal(attrib_src)) {
+        // Image not local, don't touch it
+        return;
+    }
+    /*
+     * Loading image
+     */
+    const originalImage = await Resource.loadResource($state.dir, htmlfile, attrib_src);
+    // No file -> give up
+    if (!originalImage) {
+        $state.reportIssue(htmlfile, {
+            type: 'erro',
+            msg: `Can't find img on disk src="${attrib_src}"`,
+        });
+        return;
+    }
+    /*
+     * Compress image
+     */
+    let newImage;
+    const isInPicture = (_a = img.parent()) === null || _a === void 0 ? void 0 : _a.is('picture');
+    let srcToFormat = 'unchanged';
+    if (isInPicture || isAboveTheFold) {
+        // 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
+        srcToFormat =
+            (await originalImage.getMime()) === 'image/avif' ||
+                (await originalImage.getMime()) === 'image/webp'
+                ? 'unchanged'
+                : 'webp';
+    }
+    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: 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
+        ) {
+            // 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({
+                action: newFilename !== originalImage.filePathAbsolute
+                    ? `${await originalImage.getExt()}->${newImage.format}`
+                    : path.extname(originalImage.filePathAbsolute),
+                originalSize: await originalImage.getLen(),
+                compressedSize: newImage.data.length,
             });
-            return;
+            img.attr('src', attrib_src + additionalExtension);
         }
-        /*
-         * Attribute 'alt'
-         */
-        const attrib_alt = img.attr('alt');
-        if (attrib_alt === undefined) {
-            $state.reportIssue(htmlfile, {
-                type: 'a11y',
-                msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.`,
+        else {
+            // Report non-compression
+            $state.reportSummary({
+                action: path.extname(originalImage.filePathAbsolute),
+                originalSize: await originalImage.getLen(),
+                compressedSize: await originalImage.getLen(),
             });
-            img.attr('alt', '');
         }
-        if (attrib_src.startsWith('data:')) {
-            // Data URI image
-            // TODO: try to compress it
-            return;
+    }
+    /*
+     * Embed small images
+     *
+     * TODO this is only embedding images that have
+     * successfully be compressed. Should embed original
+     * image if it fits the size.
+     */
+    let isEmbed = false;
+    if (newImage && newImage.data.length <= config.image.embed_size) {
+        let datauri = undefined;
+        switch (newImage.format) {
+            case 'svg':
+                datauri = svgToMiniDataURI(newImage.data.toString());
+                break;
+            case 'webp':
+                datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
+                break;
+            case 'jpg':
+            case 'png':
+                // TODO but not possible in current code
+                break;
         }
-        /*
-         * Attribute 'loading'
-         */
-        const attr_loading = img.attr('loading');
-        if (isAboveTheFold) {
+        if (datauri) {
+            isEmbed = true;
+            img.attr('src', datauri);
             img.removeAttr('loading');
-            img.attr('fetchpriority', 'high');
-        }
-        else {
-            switch (attr_loading) {
-                case undefined:
-                    // Go lazy by default
-                    img.attr('loading', 'lazy');
-                    break;
-                case 'eager':
-                    img.removeAttr('loading');
-                    break;
-                case 'lazy':
-                    // Don't touch it
-                    break;
-                default:
-                    $state.reportIssue(htmlfile, {
-                        type: 'invalid',
-                        msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"`,
-                    });
-            }
+            img.removeAttr('decoding');
+            $state.reportSummary({
+                action: `${newImage.format}->embed`,
+                originalSize: await originalImage.getLen(),
+                compressedSize: newImage.data.length,
+            });
         }
-        /*
-         * Attribute 'decoding'
-         */
-        img.attr('decoding', 'async');
-        if (!isLocal(attrib_src)) {
-            // Image not local, don't touch it
-            return;
+    }
+    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') {
+        return;
+    }
+    // Image size to beat in srcsets
+    //
+    const imageLengthToBeatInSrcSet = (newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < (await originalImage.getLen())
+        ? newImage.data.length
+        : await originalImage.getLen();
+    /*
+     * Attribute 'srcset'
+     */
+    if (img.attr('srcset')) {
+        // If srcset are set, don't touch it.
+        // The compress pass will compress the images
+        // of the srcset
+    }
+    else {
+        const new_srcset = await generateSrcSet(htmlfile, originalImage, attrib_src, w, h, true, imageLengthToBeatInSrcSet, { toFormat: srcToFormat, progressive: isAboveTheFold });
+        if (new_srcset !== null) {
+            img.attr('srcset', new_srcset);
         }
-        /*
-         * Loading image
-         */
-        const originalImage = await Resource.loadResource($state.dir, htmlfile, attrib_src);
-        // No file -> give up
-        if (!originalImage) {
-            $state.reportIssue(htmlfile, {
-                type: 'erro',
-                msg: `Can't find img on disk src="${attrib_src}"`,
-            });
-            return;
+        // Add sizes attribute if not specified
+        if (img.attr('srcset') && !img.attr('sizes')) {
+            img.attr('sizes', '100vw');
         }
-        /*
-         * 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: canBeProgressiveJpeg ? 'pjpg' : 'webp',
-            });
-            if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
-                (newImage.data.length < (await originalImage.getLen()) ||
-                    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({
-                    action: newFilename !== originalImage.filePathAbsolute
-                        ? `${await originalImage.getExt()}->${newImage.format}`
-                        : path.extname(originalImage.filePathAbsolute),
-                    originalSize: await originalImage.getLen(),
-                    compressedSize: newImage.data.length,
+    }
+    /*
+     * Adding <source>'s to <picture>
+     */
+    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',
                 });
-                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(),
+            case 'image/webp':
+                sourcesToGenerate.push({
+                    mime: 'image/avif',
+                    format: 'avif',
                 });
-            }
+            case 'image/avif':
+                // Nothing better
+                break;
         }
-        /*
-         * Embed small images
-         *
-         * TODO this is only embedding images that have
-         * successfully be compressed. Should embed original
-         * image if it fits the size.
-         */
-        let isEmbed = false;
-        if (newImage && newImage.data.length <= config.image.embed_size) {
-            let datauri = undefined;
-            switch (newImage.format) {
-                case 'svg':
-                    datauri = svgToMiniDataURI(newImage.data.toString());
-                    break;
-                case 'webp':
-                    datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
-                    break;
-                case 'jpg':
-                case 'png':
-                    // TODO but not possible in current code
-                    break;
+        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;
             }
-            if (datauri) {
-                isEmbed = true;
-                img.attr('src', datauri);
-                img.removeAttr('loading');
-                img.removeAttr('decoding');
-                $state.reportSummary({
-                    action: `${newImage.format}->embed`,
-                    originalSize: await originalImage.getLen(),
-                    compressedSize: newImage.data.length,
-                });
+            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 source = `<source srcset="${srcset}" type="${s.mime}">`;
+            picture.prepend(source);
         }
-        if (isEmbed) {
-            // Image is embed, no need for more processing
-            return;
-        }
-        /*
-         * Attribute 'width' & 'height'
-         */
-        const [w, h] = await setImageSize(htmlfile, img, originalImage);
+        // Reorder sources to priority order 1)avif 2)webp
         //
-        // Stop here if svg
-        //
-        if ((await originalImage.getExt()) === 'svg') {
-            return;
+        function popupSource(type) {
+            const nodes = picture.children(`source[type="${type}"]`);
+            picture.prepend(nodes);
         }
-        /*
-         * Attribute 'srcset'
-         */
-        const attr_srcset = img.attr('srcset');
-        const attr_sizes = img.attr('sizes');
-        if (attr_srcset || attr_sizes) {
-            // If srcset or sizes are set, don't touch it.
-            // The compress pass will compress the images
-            // of the srcset
-            //
-            // TODO
-            // support if sizes alone is set (no srcset) and generate the appropriate srcset
-        }
-        else {
-            // Generate image set
-            // Avif => Avif
-            // png, jpg, ... => WebP
-            const targetFormat = (await originalImage.getMime()) === 'image/avif' ? 'avif' : 'webp';
-            const ext = path.extname(attrib_src);
-            const fullbasename = attrib_src.slice(0, -ext.length);
-            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? 'jpg' : targetFormat}`;
-            // Start from original image
-            let new_srcset = '';
-            // Start reduction
-            const step = 300; //px
-            const ratio = w / h;
-            let valueW = w - step;
-            let valueH = Math.trunc(valueW / ratio);
-            let previousImageSize = (newImage === null || newImage === void 0 ? void 0 : newImage.data)
-                ? Math.min(newImage.data.length, await originalImage.getLen())
-                : await originalImage.getLen();
-            while (valueW > config.image.srcset_min_width) {
-                const src = imageSrc(`@${valueW}w`);
-                const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
-                let doAddToSrcSet = true;
-                // Don't generate srcset file twice
-                if (!$state.compressedFiles.has(absoluteFilename)) {
-                    const compressedImage = await compressImage(await originalImage.getData(), {
-                        resize: { width: valueW, height: valueH },
-                        toFormat: canBeProgressiveJpeg ? 'pjpg' : targetFormat,
-                    });
-                    if (!(compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) ||
-                        compressedImage.data.length >= previousImageSize) {
-                        // New image is not compressed or bigger than previous image in srcset
-                        // Don't add to srcset
-                        doAddToSrcSet = false;
-                    }
-                    else {
-                        // Write file
-                        if (!$state.args.nowrite) {
-                            fs.writeFile(absoluteFilename, compressedImage.data);
-                        }
-                        // Set new previous size to beat
-                        previousImageSize = compressedImage.data.length;
-                        // Add file to list avoid recompression
-                        $state.compressedFiles.add(absoluteFilename);
-                    }
-                }
-                if (doAddToSrcSet) {
-                    new_srcset += `, ${src} ${valueW}w`;
-                }
-                // reduce size
-                valueW -= step;
-                valueH = Math.trunc(valueW / ratio);
+        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);
+    const imageSrc = (addition) => `${fullbasename}${addition}${options.toFormat === 'unchanged' ? ext : '.' + options.toFormat}`;
+    // Start from original image
+    let new_srcset = '';
+    // Start reduction
+    const step = 300; //px
+    const ratio = imageWidth / imageHeight;
+    let valueW = !startWithOriginalImage ? imageWidth : imageWidth - step;
+    let valueH = Math.trunc(valueW / ratio);
+    let previousImageSize = originalImageLengthToBeat || Number.MAX_VALUE;
+    while (valueW >= config.image.srcset_min_width) {
+        const src = imageSrc(`@${valueW}w`);
+        const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
+        let doAddToSrcSet = true;
+        // Don't generate srcset file twice
+        if (!$state.compressedFiles.has(absoluteFilename)) {
+            const compressedImage = await compressImage(await originalImage.getData(), { ...options, resize: { width: valueW, height: valueH } });
+            if (!(compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) ||
+                compressedImage.data.length >= previousImageSize) {
+                // New image is not compressed or bigger than previous image in srcset
+                // Don't add to srcset
+                doAddToSrcSet = false;
             }
-            if (new_srcset) {
-                img.attr('srcset', `${img.attr('src')} ${w}w` + new_srcset);
-                img.attr('sizes', '100vw');
+            else {
+                // Write file
+                if (!$state.args.nowrite) {
+                    fs.writeFile(absoluteFilename, compressedImage.data);
+                }
+                // Set new previous size to beat
+                previousImageSize = compressedImage.data.length;
+                // Add file to list avoid recompression
+                $state.compressedFiles.add(absoluteFilename);
             }
         }
+        if (doAddToSrcSet) {
+            new_srcset += `, ${src} ${valueW}w`;
+        }
+        // reduce size
+        valueW -= step;
+        valueH = Math.trunc(valueW / ratio);
     }
-    catch (e) {
-        $state.reportIssue(htmlfile, {
-            type: 'erro',
-            msg: e.message ||
-                `Unexpected error while processing image: ${JSON.stringify(e)}`,
-        });
+    if (new_srcset) {
+        return startWithOriginalImage
+            ? `${attrib_src} ${imageWidth}w` + new_srcset
+            : new_srcset.slice(2);
     }
+    return null;
 }
 async function setImageSize(htmlfile, img, image) {
     let width = img.attr('width');
@@ -327,7 +398,7 @@ async function setImageSize(htmlfile, img, image) {
     if (width !== undefined) {
         if (!isNumeric(width)) {
             $state.reportIssue(htmlfile, {
-                type: 'warn',
+                type: 'fix',
                 msg: `Invalid width attribute format: "${width}" - overriding for ${image.src}`,
             });
             width = undefined;
@@ -336,7 +407,7 @@ async function setImageSize(htmlfile, img, image) {
     if (height !== undefined) {
         if (!isNumeric(height)) {
             $state.reportIssue(htmlfile, {
-                type: 'warn',
+                type: 'fix',
                 msg: `Invalid height attribute format: "${height}" - overriding for ${image.src}`,
             });
             height = undefined;

package/dist/state.d.ts

@@ -14,7 +14,7 @@ type Summary = {
     dataLenCompressed: number;
 };
 type Issue = {
-    type: 'invalid' | 'a11y' | 'perf' | 'erro' | 'warn';
+    type: 'invalid' | 'a11y' | 'perf' | 'erro' | 'fix' | 'warn';
     msg: string;
 };
 export declare class GlobalState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -16,27 +16,27 @@
     "/dist"
   ],
   "dependencies": {
-    "@swc/core": "^1.3.21",
+    "@swc/core": "^1.3.30",
     "@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/sharp": "^0.31.1",
     "@types/svgo": "^2.6.4",
     "@types/table": "^6.3.2",
     "cheerio": "0.22.0",
     "commander": "^9.4.1",
     "csso": "^5.0.5",
     "file-type": "^18.0.0",
-    "globby": "^13.1.2",
+    "globby": "^13.1.3",
     "hasha": "^5.2.2",
     "html-minifier-terser": "^7.1.0",
     "kleur": "^4.1.5",
     "lightningcss": "^1.18.0",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^6.1.2",
-    "sharp": "^0.31.2",
+    "sharp": "^0.31.3",
     "svgo": "^2.8.0",
     "table": "^6.8.1"
   },
@@ -45,7 +45,7 @@
     "shx": "^0.3.3",
     "ts-node": "^10.2.1",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "watch": "pnpm build --watch",