### Basic Jampack Configuration Source: https://jampack.divriots.com/configuration Example of a minimal configuration file disabling image compression. ```javascript // jampack.config.js export default { image: { compress: false, }, }; ``` -------------------------------- ### Jampack CLI execution output Source: https://jampack.divriots.com/features/browser-compatibility Example terminal output showing the Jampack build process, configuration merging, and optimization summary. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: {} Merging default config with: { "general": { "browserslist": "defaults" } } PASS 1 - Optimizing ▶ index.html Done: 21.219ms PASS 2 - Compressing the rest Done: 78.655ms Summary ╔════════╤════════════╤══════════╤════════════╤══════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟────────┼────────────┼──────────┼────────────┼──────────╢ ║ .html │ 1 / 1 │ 424.00 B │ 396.00 B │ -28.00 B ║ ║ .css │ 1 / 1 │ 415.00 B │ 351.00 B │ -64.00 B ║ ║ .jpg │ 1 / 1 │ 84.14 KB │ 76.88 KB │ -7.25 KB ║ ╟────────┼────────────┼──────────┼────────────┼──────────╢ ║ Total │ 3 / 3 │ 84.96 KB │ 77.61 KB │ -7.34 KB ║ ╚════════╧════════════╧══════════╧════════════╧══════════╝ ✔ No issues ``` -------------------------------- ### CDN Image Transformation Example Source: https://jampack.divriots.com/features/optimize-images-cdn Input HTML image element and the resulting output after Jampack processing. ```html Clouds in the sky by Taylor Van Riper ``` ```html Clouds in the sky by Taylor Van Riper ``` -------------------------------- ### Install Jampack as a development dependency Source: https://jampack.divriots.com/installation Use this command to add Jampack to your project's devDependencies. ```bash npm install -D @divriots/jampack ``` -------------------------------- ### Jampack terminal output Source: https://jampack.divriots.com/features/images-max-width Example of the terminal output when running Jampack with image max width configuration. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } Merging default config with: { "image": { "srcset_max_width": 1300, "max_width": 1300 } } PASS 1 - Optimizing ▶ index.html Done: 990.453ms Summary ╔═══════════╤════════════╤══════════╤════════════╤══════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟───────────┼────────────┼──────────┼────────────┼──────────╢ ║ jpg->webp │ 1 / 1 │ 2.66 MB │ 123.74 KB │ -2.54 MB ║ ╟───────────┼────────────┼──────────┼────────────┼──────────╢ ║ Total │ 1 / 1 │ 2.66 MB │ 123.74 KB │ -2.54 MB ║ ╚═══════════╧════════════╧══════════╧════════════╧══════════╝ ✔ No issues ``` -------------------------------- ### Jampack terminal output Source: https://jampack.divriots.com/features/inline-critical-css Example of the terminal output generated by Jampack during the optimization process. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } Merging default config with: { "css": { "inline_critical_css": true } } PASS 1 - Optimizing ▶ index.html **Inlined 365 bytes (85% of original 425 bytes) of styles.css. **Time 10.778328 Done: 32.338ms ✔ No issues **** ``` -------------------------------- ### Configure GitHub Actions Cache for Jampack Source: https://jampack.divriots.com/cache Use the actions/cache@v3 action to persist the .jampack directory between CI runs. This setup restores the previous cache before the build step and saves it afterward. ```yaml - uses: actions/cache@v3 with: path: '.jampack' key: jampack-${{ github.run_id }} restore-keys: | jampack - name: Build shell: bash run: npm run build ``` -------------------------------- ### View Jampack Terminal Output Source: https://jampack.divriots.com/features/warnings Example of the terminal output generated by Jampack when it detects an accessibility issue like a missing alt attribute. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } PASS 1 - Optimizing ▶ index.html Done: 104.569ms Summary ╔════════╤════════════╤══════════╤════════════╤══════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟────────┼────────────┼──────────┼────────────┼──────────╢ ║ .svg │ 1 / 1 │ 6.57 KB │ 5.08 KB │ -1.49 KB ║ ╟────────┼────────────┼──────────┼────────────┼──────────╢ ║ Total │ 1 / 1 │ 6.57 KB │ 5.08 KB │ -1.49 KB ║ ╚════════╧════════════╧══════════╧════════════╧══════════╝ Issues ▶ index.html a11y Missing [alt] on img src="./jam.svg" - Adding alt="" meanwhile. 1 issue(s) over 1 files ``` -------------------------------- ### Optimize static website with Jampack Source: https://jampack.divriots.com/ Run this command to optimize a static website located in the dist folder. ```bash # Optimize static website in `dist` folder npx @divriots/jampack ./dist ``` -------------------------------- ### Jampack Execution Summary Source: https://jampack.divriots.com/devlog/swyx-personal-site Console output showing the results of Jampack's optimization and compression passes. ```text PASS 1 - Optimizing ▶ index.html ✔ [1/1] Done: 90.38ms PASS 2 - Compressing the rest ✔ 69 files | 15.30 MB → 14.66 MB | -647.94 KB Done: 1.123s Summary ╔══════════════╤════════════╤═══════════╤════════════╤════════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟──────────────┼────────────┼───────────┼────────────┼────────────╢ ║ jpg->jpg │ 1 / 1 │ 24.98 KB │ 21.69 KB │ -3.30 KB ║ ║ .js │ 29 / 32 │ 228.31 KB │ 226.59 KB │ -1.72 KB ║ ║ .css │ 3 / 3 │ 45.04 KB │ 42.96 KB │ -2.08 KB ║ ║ .png │ 8 / 13 │ 1.85 MB │ 1.84 MB │ -10.61 KB ║ ║ .jpeg │ 5 / 5 │ 587.34 KB │ 444.34 KB │ -143.00 KB ║ ║ .jpg │ 5 / 5 │ 3.06 MB │ 2.58 MB │ -486.99 KB ║ ║ .html │ 1 / 1 │ 3.93 MB │ 3.93 MB │ -242.00 B ║ ║ .xml │ 0 / 1 │ 246.00 B │ 246.00 B │ ║ ║ .ico │ 0 / 1 │ 14.73 KB │ 14.73 KB │ ║ ║ .txt │ 0 / 1 │ 191.00 B │ 191.00 B │ ║ ║ .webmanifest │ 0 / 1 │ 426.00 B │ 426.00 B │ ║ ║ .json │ 0 / 2 │ 3.77 MB │ 3.77 MB │ ║ ║ .md │ 0 / 1 │ 89.00 B │ 89.00 B │ ║ ║ .gif │ 0 / 1 │ 1.81 MB │ 1.81 MB │ ║ ╟──────────────┼────────────┼───────────┼────────────┼────────────╢ ║ Total │ 52 / 69 │ 15.30 MB │ 14.66 MB │ -647.94 KB ║ ╚══════════════╧════════════╧═══════════╧════════════╧════════════╝ ``` -------------------------------- ### Configure Build Script Source: https://jampack.divriots.com/devlog/swyx-personal-site Update the package.json build script to include Jampack optimization after the Vite build process. ```json "build": "vite build && jampack ./build", ``` -------------------------------- ### Post-Optimization Performance Metrics Source: https://jampack.divriots.com/devlog/swyx-personal-site Performance metrics after running Jampack optimization. ```text SpeedIndex: 1.321s LCP: 2.449s CLS: 0 TBT: 1.150s 77 requests Download: 2.592MB ``` -------------------------------- ### Configure browserslist in Jampack Source: https://jampack.divriots.com/features/browser-compatibility Define target browsers for CSS transpilation using the browserslist query syntax within the general configuration object. ```json { "general": { "browserslist": 'last 12 versions' } } ``` -------------------------------- ### Cache structure before and after migration Source: https://jampack.divriots.com/devlog/longer-life-cache Comparison of the directory structure for Jampack cache before and after the 0.13.0 update. ```text /.jampack/cache/0.12.2/img/... /.jampack/cache/0.12.2/img-ext/... ``` ```text /.jampack/cache/img/v1/... /.jampack/cache/img-ext/v1/... ``` -------------------------------- ### Performance Metrics Output Source: https://jampack.divriots.com/devlog/swyx-personal-site A summary of site performance metrics including SpeedIndex, LCP, CLS, and TBT. ```text SpeedIndex: 1.224s LCP: 2.508s CLS: 0 TBT: 1.123s 76 requests Download: 2.575MB ``` -------------------------------- ### Jampack CLI Output for Asset Compression Source: https://jampack.divriots.com/features/compress-all Displays the terminal output of a Jampack execution, showing the PASS 2 compression summary and asset optimization statistics. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: {} PASS 1 - Optimizing ▶ index.html Done: 33.657ms PASS 2 - Compressing the rest Done: 121.692ms Summary ╔════════╤════════════╤═══════════╤════════════╤════════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟────────┼────────────┼───────────┼────────────┼────────────╢ ║ .css │ 1 / 1 │ 1.94 KB │ 1.34 KB │ -608.00 B ║ ║ .js │ 1 / 1 │ 276.00 B │ 75.00 B │ -201.00 B ║ ║ .html │ 1 / 1 │ 525.00 B │ 452.00 B │ -73.00 B ║ ║ .svg │ 1 / 1 │ 1.85 KB │ 1.37 KB │ -491.00 B ║ ║ .png │ 1 / 1 │ 138.71 KB │ 96.80 KB │ -41.90 KB ║ ║ .jpg │ 1 / 1 │ 85.12 KB │ 26.52 KB │ -58.60 KB ║ ║ .webp │ 1 / 1 │ 49.23 KB │ 19.64 KB │ -29.59 KB ║ ╟────────┼────────────┼───────────┼────────────┼────────────╢ ║ Total │ 7 / 7 │ 277.62 KB │ 146.19 KB │ -131.43 KB ║ ╚════════╧════════════╧═══════════╧════════════╧════════════╝ ✔ No issues ``` -------------------------------- ### Configure build scripts for Jampack Source: https://jampack.divriots.com/installation Update your package.json scripts to include Jampack in the build pipeline. ```json "scripts": { "build": "vite build", }, ``` ```json "scripts": { "build": "vite build && jampack ./dist", }, ``` -------------------------------- ### Jampack Configuration Types Source: https://jampack.divriots.com/configuration TypeScript definitions for all available configuration options. ```typescript import type { UrlTransformer } from 'unpic'; export type WebpOptions = { effort: number; mode: 'lossless' | 'lossly'; quality: number; }; export type Options = { general: { browserslist: string; // browserslist query string }; html: { sort_attributes: boolean; }; js: { compressor: 'esbuild' | 'swc'; // swc have smaller result but can break code (seen with SvelteKit code) }; css: { inline_critical_css: boolean; browserslist?: string; // If present, overrides general.browserslist just for CSS }; image: { embed_size: number; // Embed above the fold images if size < embed_size srcset_min_width: number; // Minimum width of generate image in srcset srcset_max_width: number; // Maximum width of generate image in srcset srcset_step: number; // Number of pixels between sizes in srcset max_width: number; // Maximum width of original images - if bigger => resized output src_include: RegExp; src_exclude: RegExp | null; external: { process: | 'off' // Default | 'download' // Experimental | ((attrib_src: string) => Promise); // Experimental src_include: RegExp; src_exclude: RegExp | null; }; cdn: { process: | 'off' //default | 'optimize'; src_include: RegExp | null; src_exclude: RegExp | null; transformer?: UrlTransformer; // Custom 'unpic' cdn url transformer, if not present it will be determined by 'unpic' based on original url }; compress: boolean; jpeg: { options: { quality: number; mozjpeg: boolean; }; }; png: { options: { compressionLevel: number; }; }; webp: { options_lossless: WebpOptions; options_lossly: WebpOptions; }; svg: { optimization: boolean; add_width_and_height: boolean; }; }; iframe: { lazyload: { when: // Default: 'below-the-fold' | 'never' // All iframes are loaded eagerly | 'below-the-fold' // Iframe are lazy loaded only if they are below the fold | 'always'; // Not recommended, but if you want to lazy load all iframes how: // Default: 'native' | 'native' // Using `loading="lazy" attribue on iframe tag | 'js'; // Using IntersectionObserver. Requires ~1Ko of JS but is more precise than native lazyload }; }; video: { autoplay_lazyload: { // Only for videos with autoplay when: // Default: 'below-the-fold' | 'never' // All video are loaded eagerly | 'below-the-fold' // videos are lazy loaded only if they are below the fold | 'always'; // Not recommended how: 'js'; // Using IntersectionObserver. Requires ~1Ko of JS }; }; misc: { prefetch_links: 'in-viewport' | 'off'; }; }; ``` -------------------------------- ### Configure prefetch_links option Source: https://jampack.divriots.com/devlog/prefetch-links Define the prefetch_links behavior within the Jampack configuration object. ```javascript { misc: { prefetch_links: 'in-viewport' | 'off'; } } ``` -------------------------------- ### Performance Metrics Output Source: https://jampack.divriots.com/devlog/swyx-personal-site Displays the performance results after disabling hydration in the SvelteKit page. ```text SpeedIndex: 1.321s LCP: 0.677s CLS: 0 TBT: 1.204s 56 requests Download: 1.250MB ``` -------------------------------- ### Performance comparison for external image processing Source: https://jampack.divriots.com/devlog/external-images Performance metrics comparing different caching strategies for processing 10 external images. ```text # Performance results (Processing 10 external images) - Without cache => ~8s - With 304 => ~2.5s (this will obviously vary with image size and network speed) ``` ```text # Performance results (Processing 10 external images) - Without cache => ~8s - With 304 => ~2.5s - Direct from cache => ~0.25s ``` -------------------------------- ### Enriching picture tags with Jampack Source: https://jampack.divriots.com/features/optimize-images Shows the transformation of a basic picture tag into one with optimized AVIF and WebP sources. ```html Red panda ``` ```html Red panda ``` -------------------------------- ### Default Jampack Configuration Values Source: https://jampack.divriots.com/configuration The default settings applied when no custom configuration is provided. ```javascript import { Options } from './config-types.js'; const default_options: Options = { general: { browserslist: 'defaults', // defaults = '> 0.5%, last 2 versions, Firefox ESR, not dead' }, html: { sort_attributes: false, }, css: { inline_critical_css: false, }, js: { compressor: 'esbuild', }, image: { embed_size: 1500, srcset_min_width: 390 * 2, // HiDPI phone srcset_max_width: 1920 * 2, // 4K srcset_step: 300, max_width: 99999, src_include: /^.*$/, src_exclude: /^\/vercel\/image\?/, // Ignore /vervel/image? URLs because not local and most likely already optimized, external: { process: 'off', src_include: /^.*$/, src_exclude: null, }, cdn: { process: 'off', src_include: null, src_exclude: null, }, compress: true, jpeg: { options: { quality: 75, mozjpeg: true, }, }, png: { options: { compressionLevel: 9, }, }, webp: { options_lossless: { effort: 4, quality: 77, mode: 'lossless', }, options_lossly: { effort: 4, quality: 77, mode: 'lossly', }, }, svg: { optimization: true, add_width_and_height: false, }, }, iframe: { lazyload: { when: 'below-the-fold', how: 'native', }, }, video: { autoplay_lazyload: { when: 'below-the-fold', how: 'js', }, }, misc: { prefetch_links: 'off', }, }; export default default_options; ``` -------------------------------- ### Optimize tags with Jampack Source: https://jampack.divriots.com/features/optimize-images Jampack transforms standard image tags into optimized versions with responsive srcset, lazy loading, and explicit dimensions. ```html Red panda ``` ```html Red panda ``` -------------------------------- ### Jampack CLI Output Source: https://jampack.divriots.com/features/video Displays the terminal output when running Jampack optimization on a project. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } PASS 1 - Optimizing ▶ index.html Done: 23.542ms ✔ No issues ``` -------------------------------- ### HTML output after optimization Source: https://jampack.divriots.com/features/inline-critical-css The resulting HTML after Jampack inlines critical CSS into the head and adds preload/lazy-load links. ```html Testing

Hello World!

This is a paragraph

``` -------------------------------- ### Enable critical CSS inlining configuration Source: https://jampack.divriots.com/devlog/inline-critical-css Add this configuration to your Jampack settings to enable the automatic inlining of critical CSS. ```json { css: { inline_critical_css: true, } } ``` -------------------------------- ### HTML source before optimization Source: https://jampack.divriots.com/features/inline-critical-css The original HTML structure referencing an external stylesheet before Jampack processes the critical CSS. ```html Testing

Hello World!

This is a paragraph

``` -------------------------------- ### Configure image max width Source: https://jampack.divriots.com/features/images-max-width Define the maximum width for output images and srcset attributes in the project configuration file. ```javascript export default { image: { srcset_max_width: 1300, // Max width used in srcset max_width: 1300, // Max width of output image }, }; ``` -------------------------------- ### Preload stylesheet link Source: https://jampack.divriots.com/features/inline-critical-css The preload link injected in the header to improve performance. ```html ``` -------------------------------- ### Marking the fold in HTML Source: https://jampack.divriots.com/features/optimize-above-the-fold Place the tag in your HTML to explicitly define the fold position for Jampack optimizations. ```html > index.html ... ... content above the fold ... ... ... content below the fold ... ``` -------------------------------- ### Jampack Optimization Terminal Output Source: https://jampack.divriots.com/features/optimize-images Displays the console output after running image optimization, including compression statistics and file format conversions. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } PASS 1 - Optimizing ▶ index.html Done: 1:20.558 (m:ss.mmm) Summary ╔═══════════╤════════════╤═══════════╤════════════╤════════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟───────────┼────────────┼───────────┼────────────┼────────────╢ ║ .jpg │ 2 / 2 │ 1.80 MB │ 940.45 KB │ -900.72 KB ║ ║ .png │ 2 / 2 │ 630.09 KB │ 582.83 KB │ -47.26 KB ║ ║ jpg->webp │ 3 / 3 │ 2.75 MB │ 1.29 MB │ -1.46 MB ║ ║ png->webp │ 3 / 3 │ 768.79 KB │ 282.58 KB │ -486.22 KB ║ ║ .svg │ 2 / 2 │ 8.42 KB │ 6.45 KB │ -1.97 KB ║ ╟───────────┼────────────┼───────────┼────────────┼────────────╢ ║ Total │ 12 / 12 │ 5.92 MB │ 3.06 MB │ -2.86 MB ║ ╚═══════════╧════════════╧═══════════╧════════════╧════════════╝ ✔ No issues ``` -------------------------------- ### Responsive tag transformation Source: https://jampack.divriots.com/ Enhances picture tags with multiple source formats including AVIF and WebP for improved performance. ```html Red panda ``` ```html Red panda ``` -------------------------------- ### Terminal Output for Jampack Auto-fixes Source: https://jampack.divriots.com/features/autofixes Displays the terminal output when Jampack detects and fixes invalid width and height attribute formats in an HTML file. ```text __ __ |__|____ _____ ___________ ____ | | __ | \__ \ / \\____ \__ \ _/ ___\| |/ / | |/ __ \| Y Y \ |_> > __ \\ \___| < /\__| (____ /__|_| / __(____ /\___ >__|_ \ \______| \/ \/| | \/ \/ \/ v0.34.1 |__| by ‹div›RIOTS Options: { onlyoptim: true } PASS 1 - Optimizing ▶ index.html Done: 74.601ms Summary ╔═══════════╤════════════╤══════════╤════════════╤═══════════╗ ║ Action │ Compressed │ Original │ Compressed │ Gain ║ ╟───────────┼────────────┼──────────┼────────────┼───────────╢ ║ jpg->webp │ 1 / 1 │ 85.12 KB │ 27.75 KB │ -57.37 KB ║ ╟───────────┼────────────┼──────────┼────────────┼───────────╢ ║ Total │ 1 / 1 │ 85.12 KB │ 27.75 KB │ -57.37 KB ║ ╚═══════════╧════════════╧══════════╧════════════╧═══════════╝ Issues ▶ index.html fix Invalid width attribute format: "500px" - overriding for ./redpanda_500x335.jpg fix Invalid height attribute format: "335px" - overriding for ./redpanda_500x335.jpg 2 issue(s) over 1 files ``` -------------------------------- ### Configure CDN Image Processing Source: https://jampack.divriots.com/features/optimize-images-cdn Set the CDN processing mode in your Jampack configuration file. ```javascript image: { cdn: { process: 'off' | 'optimize', }, } ``` -------------------------------- ### Lazy-load stylesheet link Source: https://jampack.divriots.com/features/inline-critical-css The stylesheet link injected at the end of the document for lazy loading. ```html ``` -------------------------------- ### Configure external image processing Source: https://jampack.divriots.com/devlog/external-images Set the external image processing mode in the Jampack configuration file. ```javascript image: { external: { process: 'off' | 'download', }, } ``` -------------------------------- ### Transform external image elements Source: https://jampack.divriots.com/features/optimize-images-external Jampack automatically replaces external image sources with optimized local versions and adds attributes like loading and srcset. ```html Clouds in the sky by Taylor Van Riper ``` ```html Clouds in the sky by Taylor Van Riper ``` -------------------------------- ### Responsive tag transformation Source: https://jampack.divriots.com/ Transforms a standard img tag into a responsive version with srcset, sizes, and lazy loading attributes. ```html Red panda ``` ```html Red panda ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.