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="./[email protected] 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w">
    <source type="image/avif" srcset="./[email protected] 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w">
    <img src="./redpanda.jpg" alt loading="lazy" decoding="async" width="1936" height="1296" srcset="./redpanda.jpg 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w" sizes="100vw">
</picture>

will become

<picture>
    <source type="image/avif" srcset="./[email protected] 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w">
    <source type="image/webp" srcset="./[email protected] 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w">
    <img src="./redpanda.jpg" alt loading="lazy" decoding="async" width="1936" height="1296" srcset="./redpanda.jpg 1936w, ./[email protected] 1636w, ./[email protected] 1336w, ./[email protected] 1036w, ./[email protected] 736w" sizes="100vw">
</picture>

Demo

SOURCE

JAMPACKED

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

SOURCE

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

JAMPACKED

  • _jampack
  • index.html365
  • music_500x447.png142036
  • redpanda_500x335.jpg87167
  • redpanda_500x335.jpg.jpg27160
SourceOpen in new tab
JampackedOpen in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.23.3              |__| by β€Ήdivβ€ΊRIOTS

Options:
{ onlyoptim: true }


 PASS 1 - Optimizing 
β–Ά index.html
  2 issues
Done: 86.817ms

 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

 fix  Adding missing  to the top of the 


 3 issue(s) over 1 files