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 c2039357b30db3de08082345f32021d3.jpg 151845 c2039357b30db3de08082345f32021d3.webp 43372 [email protected] 18618 [email protected] 25706 [email protected] 33546 [email protected] 12738foo foo bar.html 392 bar.html 676index.html 549 index.html 618SOURCE
- foo
- bar.html 392
- index.html 549
JAMPACKED
- _jampack
- 6b620bfb300f0e8ae9b211caaea7dfa1.jpg 230169
- 6b620bfb300f0e8ae9b211caaea7dfa1.webp 75118
- [email protected] 54490
- c2039357b30db3de08082345f32021d3.jpg 151845
- c2039357b30db3de08082345f32021d3.webp 43372
- [email protected] 18618
- [email protected] 25706
- [email protected] 33546
- [email protected] 12738
- foo
- bar.html 676
- index.html 618
Terminal
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
v0.24.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.885s
Summary
βββββββββββββ€βββββββββββββ€ββββββββββββ€βββββββββββββ€βββββββββββββ
β Action β Compressed β Original β Compressed β Gain β
βββββββββββββΌβββββββββββββΌββββββββββββΌβββββββββββββΌβββββββββββββ’
β jpg->webp β 2 / 2 β 373.06 KB β 115.71 KB β -257.35 KB β
βββββββββββββΌβββββββββββββΌββββββββββββΌβββββββββββββΌβββββββββββββ’
β Total β 2 / 2 β 373.06 KB β 115.71 KB β -257.35 KB β
βββββββββββββ§βββββββββββββ§ββββββββββββ§βββββββββββββ§βββββββββββββ
Issues
βΆ foo/bar.html
fix Adding missing to the top of the
1 issue(s) over 1 files