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 4e2854762012b127e1222a09d4fdc7c1.jpg 151044 4e2854762012b127e1222a09d4fdc7c1.webp 42818 [email protected] 18670 [email protected] 25620 [email protected] 33278 [email protected] 12816 6b620bfb300f0e8ae9b211caaea7dfa1.jpg 230169 6b620bfb300f0e8ae9b211caaea7dfa1.webp 75118 [email protected] 54490foo foo bar.html 392 bar.html 636index.html 549 index.html 578

SOURCE

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

JAMPACKED

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

 Summary 
╔═══════════╤════════════╤═══════════╤════════════╤════════════╗
║ Action    │ Compressed │  Original │ Compressed │       Gain ║
╟───────────┼────────────┼───────────┼────────────┼────────────╢
║ jpg->webp │      2 / 2 │ 372.28 KB │  115.17 KB │ -257.11 KB ║
╟───────────┼────────────┼───────────┼────────────┼────────────╢
║ Total     │      2 / 2 │ 372.28 KB │  115.17 KB │ -257.11 KB ║
╚═══════════╧════════════╧═══════════╧════════════╧════════════╝


 Issues 

▶ foo/bar.html

 fix  Adding missing  to the top of the 


 1 issue(s) over 1 files