Auto-fixes

jampack will fix issues in assets automatically.

Wrong format for width and height in <img>s

Should be numerical values only.

jampack will fix either or both values based on the dimensions of the image.

Reordering <source> nodes in <picture>

For <picture> images that already have sources, the <node> children will be reorder to make sure AVIF sources are first and followed by WebP sources since these are the most efficient format but with less browser support.

<picture>
    <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">
    <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">
    <img src="./redpanda.jpg" alt 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>

will become

<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 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>

Demo

SOURCE

JAMPACKED

_jampackindex.html286index.html343music_500x447.png142036music_500x447.png142036redpanda_500x335.jpg87167redpanda_500x335.jpg87167redpanda_500x335.jpg.jpg27160

SOURCE

  • index.html286
  • music_500x447.png142036
  • redpanda_500x335.jpg87167

JAMPACKED

  • _jampack
  • index.html343
  • music_500x447.png142036
  • redpanda_500x335.jpg87167
  • redpanda_500x335.jpg.jpg27160
SourceOpen in new tab
JampackedOpen in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.20.2              |__| by ‹div›RIOTS

Options:
{ onlyoptim: true }


 PASS 1 - Optimizing 
▶ index.html
  2 issues
Done: 103.921ms

 Summary 
╔══════════╤════════════╤══════════╤════════════╤═══════════╗
║ Action   │ Compressed │ Original │ Compressed │      Gain ║
╟──────────┼────────────┼──────────┼────────────┼───────────╢
║ jpg->jpg │      1 / 1 │ 85.12 KB │   26.52 KB │ -58.60 KB ║
╟──────────┼────────────┼──────────┼────────────┼───────────╢
║ Total    │      1 / 1 │ 85.12 KB │   26.52 KB │ -58.60 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