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 578SOURCE
- foo
- bar.html 392
- index.html 549
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] 54490
- foo
- bar.html 636
- index.html 578
Terminal
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
v0.30.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: 1.994s
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