\n\n[](https://npmjs.org/package/@divriots/jampack) \n[](https://discord.gg/XkQxSU9)\n\n# Jampack\n\nOptimizes static websites for best user experience and best Core Web Vitals scores.\n\n
\n\n## What is `jampack`?\n\n> Not a bundler. Not a framework.\n\n`jampack` is a post-processing tool that takes the output of your [Static Site Generator (aka SSG)](https://jamstack.org/generators/) and optimizes it for best user experience and best [Core Web Vitals](https://web.dev/learn-core-web-vitals/) scores.\n\n[Read the introduction blog post](https://divriots.com/blog/introducing-jampack/)\n\n## What can `jampack` do?\n\n### ``\n\n```html\n\n```\n\nbecomes responsive with dimensions:\n\n```html\n\n```\n\n### ``\n\n```html\n\n \n\n```\n\nbecomes responsive with multiple formats including AVIF:\n\n```html\n\n \n \n \n\n```\n\n[Read more](/features/optimize-images)\n\n### CDN images become responsive\n\n```html\n\n```\n\nbecomes\n\n```html\n\n```\n\n[Read more](/features/optimize-images-cdn)\n\n### External images can be downloaded and optimized\n\n```html\n\n```\n\nbecomes\n\n```html\n\n```\n\n[Read more](/features/optimize-images-external)\n\n### Above & below-the-fold\n\n`jampack` optimizes assets above-the-fold ⬆️.\n\n- Images are loaded with higher priority.\n- Small images are embedded in HTML.\n\nLazy-load assets below-the-fold ⬇️.\n\n- Images and Iframes are lazy loaded.\n\n[Read more](https://jampack.divriots.com/features/optimize-above-the-fold/)\n\n## Inline critical CSS\n\nAvoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) while stylesheets are downloaded and parsed.\n`jampack` will inline critical CSS and lazy-load the rest of CSS.\n\n[Read more](https://jampack.divriots.com/features/inline-critical-css/)\n\n## Prefetch links\n\nSpeedup the future page navigations by prefetching the links on the page.\nThanks to [quicklink](https://github.com/GoogleChromeLabs/quicklink), this can be done dynamically as links enter the viewport.\n\n[Read more](https://jampack.divriots.com/features/prefetch-links/)\n\n### All assets are compressed\n\nIn a 2nd PASS, `jampack` compresses all untouched assets and keep the same name and the same format.\n\n| Extension | Compressor | \n| --------------- | --------------------- | \n| `.html`,`.htm` | [`html-minifier-terser`](https://github.com/terser/html-minifier-terser) | \n| `.css` | [`lightningCSS`](https://lightningcss.dev) |\n| `.js` | [`esbuild`](https://esbuild.github.io/) or [`swc`](https://swc.rs/) | \n| `.svg` | [`svgo`](https://github.com/svg/svgo) | \n| `.jpg`,`.jpeg` | [`sharp`](https://sharp.pixelplumbing.com/) | \n| `.png` | [`sharp`](https://sharp.pixelplumbing.com/) | \n| `.webp` | [`sharp`](https://sharp.pixelplumbing.com/) | \n| `.avif` | [`sharp`](https://sharp.pixelplumbing.com/) | \n\n### [And a lot more!](https://jampack.divriots.com/)\n\n\n## Quick use\n\n```sh\n# Optimize static website in `dist` folder\nnpx @divriots/jampack ./dist\n```\n\nFor more options see [CLI options](https://jampack.divriots.com/cli-options/).\n\n## `jampack` used in the wild\n\n- Powering all [‹div›RIOTS](https://divRIOTS.com)' websites\n- [keycloak.ch](https://keycloak.ch)\n- [bayjs.org](https://bayjs.org/)\n- [qwind.pages.dev](https://qwind.pages.dev/)\n- [Bloycey's Blog](https://bloycey.blog/)\n- [gxanshu.in](https://gxanshu.in/)\n- [cloudcannon.com](https://cloudcannon.com)\n- [groupsync.app](https://groupsync.app)\n> Add yours here\n\n## Why is it called `jampack`?\n\n- `jam`: From [Jamstack](https://en.wikipedia.org/wiki/Jamstack).\n- `pack`: Reminescent of the [Executable Packers](https://en.wikipedia.org/wiki/Executable_compression#List_of_executable_packers) from the 90s.\n\n## License\n\nThis software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).\n","readmeFilename":"README.md"}
![\"‹div›RIOTS\"](\"https://divRIOTS.com/divriots.svg\")
\n \n \n ![\"‹div›RIOTS\"](\"https://divRIOTS.com/divriots-dark.svg\")
\n \n![\"Red](\"./redpanda.jpg\")
\n```\n\nbecomes responsive with dimensions:\n\n```html\n![\"Red](\"./redpanda.jpg.webp\")
\n```\n\n### `