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

_jampack
47e14265fe23c852706c6869f062812a.jpg223758
47e14265fe23c852706c6869f062812a.jpg.webp74506
[email protected]53384
7f0c7b62b1826fe505eaf8b624139f3f.jpg151344
7f0c7b62b1826fe505eaf8b624139f3f.jpg.webp43308
[email protected]18892
[email protected]25670
[email protected]33468
[email protected]12800
foo
bar.html684
index.html621

Source

Jampacked

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