Optimize external images

This feature is experimental

jampack can optionally optimizes external images for faster download on any device and better Core Web Vitals scores.

Configuration

image: {
    external: {
      process: 'off' | 'download',
    },
}
process:Description
'off'It will ignore external images and only optimize local images.
'download'It will download external images optimize them like local images.

Example

<img> and <picture> elements with external images like:

<img
     src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80"
     alt="Clouds in the sky by Taylor Van Riper"
/>

becomes

<img
     src="_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp"
     alt="Clouds in the sky by Taylor Van Riper"
     loading="lazy"
     decoding="async"
     width="1287"
     height="1931"
     srcset="
        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp  1287w,
        _jampack/[email protected]  987w,
        _jampack/[email protected]  687w
     "
     sizes="100vw"
    />

For more details, see how local images are optimized.

Demo

SOURCE

JAMPACKED

_jampack47e14265fe23c852706c6869f062812a.jpg22375847e14265fe23c852706c6869f062812a.jpg.webp74506[email protected]533847f0c7b62b1826fe505eaf8b624139f3f.jpg1513447f0c7b62b1826fe505eaf8b624139f3f.jpg.webp43308[email protected]18892[email protected]25670[email protected]33468[email protected]12800foofoobar.html392bar.html684index.html520index.html621

SOURCE

  • foo
  • bar.html392
  • index.html520

JAMPACKED

SourceOpen in new tab
JampackedOpen in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.22.1              |__| by โ€นdivโ€บRIOTS

Options:
{ onlyoptim: true }

Merging default config with:
{
  "image": {
    "external": {
      "process": "download"
    }
  }
}

 PASS 1 - Optimizing 
โ–ถ index.html
Downloading https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80
โ–ถ foo/bar.html
Downloading https://plus.unsplash.com/premium_photo-1663837826974-247ded568f9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80
Done: 2.157s

 Summary 
โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•คโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•คโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•คโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•คโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•—
โ•‘ Action    โ”‚ Compressed โ”‚  Original โ”‚ Compressed โ”‚       Gain โ•‘
โ•Ÿโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ข
โ•‘ jpg->webp โ”‚      2 / 2 โ”‚ 366.31 KB โ”‚  115.05 KB โ”‚ -251.26 KB โ•‘
โ•Ÿโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ข
โ•‘ Total     โ”‚      2 / 2 โ”‚ 366.31 KB โ”‚  115.05 KB โ”‚ -251.26 KB โ•‘
โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•งโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•งโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•งโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•งโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•


 Issues 

โ–ถ index.html

 fix  Adding missing  to the top of the 

โ–ถ foo/bar.html

 fix  Adding missing  to the top of the 


 2 issue(s) over 2 files