__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
                      |__|

Jampack

Optimizes static websites for best user experience and best Core Web Vitals scores.

Brought to you by

What is jampack?

Not a bundler. Not a framework.

jampack is a post-processing tool that takes the output of your Static Site Generator (aka SSG) and optimizes it for best user experience and best Core Web Vitals scores.

Read the introduction blog post

What can jampack do?

<img>

<img src="./redpanda.jpg" alt="Red panda">

becomes responsive with dimensions:

<img src="./redpanda.jpg.webp" alt="Red panda" 
     srcset="
     ./redpanda.jpg.webp 3872w, ./[email protected] 3572w, ./[email protected] 3272w, 
     ./[email protected] 2972w, ./[email protected] 2672w, ./[email protected] 2372w,
     ./[email protected] 2072w, ./[email protected] 1772w, ./[email protected] 1472w,
     ./[email protected] 1172w, ./[email protected] 872w"
     sizes="100vw"
     loading="lazy"
     decoding="async"
     width="3872" 
     height="2592">

<picture>

<picture>
    <img src="./redpanda.jpg" alt="Red panda">
</picture>

becomes responsive with multiple formats including AVIF:

<picture>
    <source type="image/avif" 
            srcset="./[email protected] 1936w, ./[email protected] 1636w,
                    ./[email protected] 1336w, ./[email protected] 1036w,
                    ./[email protected] 736w">
    <source type="image/webp" 
            srcset="./[email protected] 1936w, ./[email protected] 1636w,
                    ./[email protected] 1336w, ./[email protected] 1036w,
                    ./[email protected] 736w">
    <img src="./redpanda.jpg" 
         alt="Red panda" 
         loading="lazy" 
         decoding="async" 
         width="1936" 
         height="1296" 
         srcset="./redpanda.jpg 1936w, ./[email protected] 1636w,
                 ./[email protected] 1336w, ./[email protected] 1036w,
                 ./[email protected] 736w"
         sizes="100vw">
</picture>

Above & below-the-fold

jampack optimizes assets above-the-fold ⬆️.

• Images are loaded with higher priority.
• Images are compress as Progressive JPEG.
• Small images are embedded in HTML.

Lazy-load assets below-the-fold ⬇️.

• Images and Iframes are lazy loaded.

See details.

All assets are compressed

In a 2nd PASS, jampack compresses all untouched assets and keep the same name and the same format.

And more!

See Documentation for all feature list and examples.

Quick use

# Optimize static website in `dist` folder
npx @divriots/jampack ./dist

For more options see CLI options.

jampack used in the wild

• divRIOTS.com
• Backlight.dev
• story.to.design
• html.to.design
• WebComponents.dev
• LWC.studio
• Components.studio
• keycloak.ch
• bayjs.org
• qwind.pages.dev
• Bloycey's Blog
• codenanshu.in

Add yours here

Why is it called jampack?

• jam: From Jamstack.
• pack: Reminescent of the Executable Packers from the 90s.

License

This software is released under the terms of the MIT license.