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

_jampack 6b620bfb300f0e8ae9b211caaea7dfa1.jpg 230169 6b620bfb300f0e8ae9b211caaea7dfa1.webp 75118 [email protected] 54490 f7ecc2f298e7a2b931cf0c9dc01bbece.jpg 151064 f7ecc2f298e7a2b931cf0c9dc01bbece.webp 42834 [email protected] 18916 [email protected] 25592 [email protected] 33276 [email protected] 12774foo foo bar.html 392 bar.html 676index.html 549 index.html 618

SOURCE

  • foo
  • bar.html 392
  • index.html 549

JAMPACKED

Source Open in new tab
Jampacked Open in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.24.4              |__| 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: 1.999s

 Summary 
╔═══════════╀════════════╀═══════════╀════════════╀════════════╗
β•‘ Action    β”‚ Compressed β”‚  Original β”‚ Compressed β”‚       Gain β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ jpg->webp β”‚      2 / 2 β”‚ 372.30 KB β”‚  115.19 KB β”‚ -257.11 KB β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ Total     β”‚      2 / 2 β”‚ 372.30 KB β”‚  115.19 KB β”‚ -257.11 KB β•‘
β•šβ•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•


 Issues 

β–Ά foo/bar.html

 fix  Adding missing  to the top of the 


 1 issue(s) over 1 files