Jampack

https://jampack.divriots.com/
Admin
Jampack is a post-processing tool that optimizes static websites, generated by SSGs, for enhanced...
Tokens:14,164
Snippets:136
Trust Score:8.4
Update:3 months ago
Show doc for...
Tokens:
Raw
### 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
<img
      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Clouds in the sky by Taylor Van Riper"
      width="2848"
      height="4272"
    />
```

```html
<img
      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Clouds in the sky by Taylor Van Riper"
      width="2848"
      height="4272"
      loading="lazy"
      decoding="async"
      srcset="
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2848&amp;fit=min&amp;auto=format 2848w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2548&amp;fit=min&amp;auto=format 2548w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2248&amp;fit=min&amp;auto=format 2248w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1948&amp;fit=min&amp;auto=format 1948w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1648&amp;fit=min&amp;auto=format 1648w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1348&amp;fit=min&amp;auto=format 1348w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1048&amp;fit=min&amp;auto=format 1048w
      "
      sizes="100vw"
    />
```

--------------------------------

### 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
  ✔ <img> [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<string>); // 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
<picture>
    <img src="./redpanda.jpg" alt="Red panda">
</picture>
```

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

--------------------------------

### 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 <img> 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
<img src="./redpanda.jpg" alt="Red panda">
```

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

--------------------------------

### 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
<html data-critters-container>
  <head>
    <title>Testing</title>
    <style>
h1 {
  color: blue;
}

p {
  color: purple;
}

header {
  padding: 0 50px;
}

.banner {
  font-family: sans-serif;
}

.contents {
  padding: 50px;
  text-align: center;
}

.input-field {
  padding: 10px;
}

footer {
  margin-top: 10px;
}

.container {
  border: 1px solid;
}

div:is(:hover, .active) {
  color: #000;
}

div:is(.selected, :hover) {
  color: #fff;
}
</style>
  <link rel="preload" href="styles.css" as="style">
  </head>
  <body>
    <div class="container">
      <header>
        <div class="banner">Lorem ipsum dolor sit amet</div>
      </header>
    </div>
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph</p>
      <input class="input-field">
      <div class="contents"></div>
      <div class="selected active"></div>
    </div>
    <footer></footer>

<link rel="stylesheet" href="styles.css"></body></html>
```

--------------------------------

### 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
<html>
  <head>
    <title>Testing</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <div class="banner">Lorem ipsum dolor sit amet</div>
      </header>
    </div>
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph</p>
      <input class="input-field" />
      <div class="contents"></div>
      <div class="selected active"></div>
    </div>
    <footer></footer>
  </body>
</html>
```

--------------------------------

### 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
<link rel="preload" href="styles.css" as="style">
```

--------------------------------

### Marking the fold in HTML

Source: https://jampack.divriots.com/features/optimize-above-the-fold

Place the <the-fold> tag in your HTML to explicitly define the fold position for Jampack optimizations.

```html
> index.html 
... 
... content above the fold 
...
<the-fold></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 <picture> tag transformation

Source: https://jampack.divriots.com/

Enhances picture tags with multiple source formats including AVIF and WebP for improved performance.

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

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

--------------------------------

### 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
<link rel="stylesheet" href="styles.css">
```

--------------------------------

### 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
<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"
/>
```

```html
<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/ab99b9d280ce4cf7cfc810b59f3a7739@987w.webp  987w,
        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739@687w.webp  687w
     "
     sizes="100vw"
    />
```

--------------------------------

### Responsive <img> tag transformation

Source: https://jampack.divriots.com/

Transforms a standard img tag into a responsive version with srcset, sizes, and lazy loading attributes.

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

```html
<img src="./redpanda.jpg.webp" alt="Red panda" 
     srcset="
     ./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, 
     ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w,
     ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w,
     ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
     sizes="100vw"
     loading="lazy"
     decoding="async"
     width="3872" 
     height="2592">
```
Tokens:
Raw