{"id":13611851,"url":"https://github.com/divriots/jampack","last_synced_at":"2025-05-13T22:05:45.398Z","repository":{"id":61655237,"uuid":"538386270","full_name":"divriots/jampack","owner":"divriots","description":"Optimizes static websites for best user experience and best Core Web Vitals scores.","archived":false,"fork":false,"pushed_at":"2025-01-07T17:05:36.000Z","size":12669,"stargazers_count":1652,"open_issues_count":18,"forks_count":24,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-24T05:09:35.089Z","etag":null,"topics":["blog","jamstack","node","static-site","static-site-building","static-site-generator"],"latest_commit_sha":null,"homepage":"https://jampack.divriots.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/divriots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-19T07:38:37.000Z","updated_at":"2025-04-23T20:09:13.000Z","dependencies_parsed_at":"2024-01-07T05:04:29.910Z","dependency_job_id":"12f803b0-db0c-4ff7-86dd-da4f0f9ef327","html_url":"https://github.com/divriots/jampack","commit_stats":{"total_commits":228,"total_committers":9,"mean_commits":"25.333333333333332","dds":"0.10087719298245612","last_synced_commit":"7bc0176af41bf28e34eb3516930ab060a1210003"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fjampack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fjampack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fjampack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fjampack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/jampack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251336740,"owners_count":21573254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","jamstack","node","static-site","static-site-building","static-site-generator"],"created_at":"2024-08-01T19:02:13.956Z","updated_at":"2025-04-28T15:23:58.619Z","avatar_url":"https://github.com/divriots.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv\u003e\n\n```\n     __                                    __    \n    |__|____    _____ ___________    ____ |  | __\n    |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /\n    |  |/ __ \\|  Y Y  \\  |_\u003e \u003e __ \\\\  \\___|    \u003c \n/\\__|  (____  /__|_|  /   __(____  /\\___  \u003e__|_ \\\n\\______|    \\/      \\/|  |       \\/     \\/     \\/\n                      |__|\n```\n\n\u003c/div\u003e\n\n[![npm version](https://img.shields.io/npm/v/@divriots/jampack)](https://npmjs.org/package/@divriots/jampack) \n[![Discord](https://img.shields.io/badge/chat-discord-blue?style=flat\u0026logo=discord)](https://discord.gg/XkQxSU9)\n\n# Jampack\n\nOptimizes static websites for best user experience and best Core Web Vitals scores.\n\n\u003cdiv id=\"banner\"\u003e\n  \u003cdiv\u003eBrought to you by\u003c/div\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-light-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-dark-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots-dark.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## What is `jampack`?\n\n\u003e 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### `\u003cimg\u003e`\n\n```html\n\u003cimg src=\"./redpanda.jpg\" alt=\"Red panda\"\u003e\n```\n\nbecomes responsive with dimensions:\n\n```html\n\u003cimg src=\"./redpanda.jpg.webp\" alt=\"Red panda\" \n     srcset=\"\n     ./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, \n     ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w,\n     ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w,\n     ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w\"\n     sizes=\"100vw\"\n     loading=\"lazy\"\n     decoding=\"async\"\n     width=\"3872\" \n     height=\"2592\"\u003e\n```\n\n### `\u003cpicture\u003e`\n\n```html\n\u003cpicture\u003e\n    \u003cimg src=\"./redpanda.jpg\" alt=\"Red panda\"\u003e\n\u003c/picture\u003e\n```\n\nbecomes responsive with multiple formats including AVIF:\n\n```html\n\u003cpicture\u003e\n    \u003csource type=\"image/avif\" \n            srcset=\"./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w,\n                    ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w,\n                    ./redpanda@736w.avif 736w\"\u003e\n    \u003csource type=\"image/webp\" \n            srcset=\"./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w,\n                    ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w,\n                    ./redpanda@736w.webp 736w\"\u003e\n    \u003cimg src=\"./redpanda.jpg\" \n         alt=\"Red panda\" \n         loading=\"lazy\" \n         decoding=\"async\" \n         width=\"1936\" \n         height=\"1296\" \n         srcset=\"./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w,\n                 ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w,\n                 ./redpanda@736w.jpg 736w\"\n         sizes=\"100vw\"\u003e\n\u003c/picture\u003e\n```\n\n[Read more](/features/optimize-images)\n\n### CDN images become responsive\n\n```html\n\u003cimg\n      src=\"https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n      alt=\"Clouds in the sky by Taylor Van Riper\"\n      width=\"2848\"\n      height=\"4272\"\n    /\u003e\n```\n\nbecomes\n\n```html\n\u003cimg\n      src=\"https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n      alt=\"Clouds in the sky by Taylor Van Riper\"\n      width=\"2848\"\n      height=\"4272\"\n      loading=\"lazy\"\n      decoding=\"async\"\n      srcset=\"\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=2848\u0026amp;fit=min\u0026amp;auto=format 2848w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=2548\u0026amp;fit=min\u0026amp;auto=format 2548w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=2248\u0026amp;fit=min\u0026amp;auto=format 2248w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=1948\u0026amp;fit=min\u0026amp;auto=format 1948w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=1648\u0026amp;fit=min\u0026amp;auto=format 1648w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=1348\u0026amp;fit=min\u0026amp;auto=format 1348w,\n        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026amp;w=1048\u0026amp;fit=min\u0026amp;auto=format 1048w\n      \"\n      sizes=\"100vw\"\n    /\u003e\n```\n\n[Read more](/features/optimize-images-cdn)\n\n### External images can be downloaded and optimized\n\n```html\n\u003cimg\n     src=\"https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\u0026auto=jpg\u0026fit=crop\u0026w=1287\u0026q=80\"\n     alt=\"Clouds in the sky by Taylor Van Riper\"\n/\u003e\n```\n\nbecomes\n\n```html\n\u003cimg\n     src=\"_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp\"\n     alt=\"Clouds in the sky by Taylor Van Riper\"\n     loading=\"lazy\"\n     decoding=\"async\"\n     width=\"1287\"\n     height=\"1931\"\n     srcset=\"\n        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp  1287w,\n        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739@987w.webp  987w,\n        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739@687w.webp  687w\n     \"\n     sizes=\"100vw\"\n    /\u003e\n```\n\n[Read more](/features/optimize-images-external)\n\n### Above \u0026 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\u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fjampack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fjampack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fjampack/lists"}