Optimize local images

jampack optimizes local images for faster download on any device and better Core Web Vitals scores.

  • Compresses images using better compressors or modern formats.
  • Generates responsive image sets for smaller devices.
  • Adds image dimensions if missing to avoid CLS issues.
  • Sets images to lazy loading (with exceptions)

<img> tags

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

becomes

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

src image is compressed

srcset of smaller images are generated

jampack will generate a set of smaller images by reducing the width of the images by steps of 300px.

In other words, you can have a single image in your static site and jampack will create the different smaller versions to serve the most optimized image for smaller devices.

If srcset is already present in source <img> then nothing is done and images are just compressed in PASS 2.

Responsives sizes

You can set sizes attribute to fine tune image selection in the srcset. See sizes attributes for more details.

sizes="100vw" will be added by default when srcset is set.

Lazy loading

jampack will set all images to load in lazy by default. This gives the browser the opportunity to load more critical data instead.

Images will have new attributes:

  • loading="lazy"
  • decoding="async"

Exceptions

Images will not be lazy loaded in the following conditions:

  • Image has attribute loading="eager". Explicitly requesting for no lazy loading.
  • Image is marked above the fold.

Note

Lazy loading images above the fold can cause LCP issues, we recommend to use the jampack’s <the-fold> feature or mark images with loading="eager" for images above the fold.

Sets width and height attributes

jampack will set image dimensions to avoid CLS issues.

jampack will also fix images with invalid format for attributes width or height.

<picture> tags

jampack will enrich <picture> tags with AVIF and WebP sources when they are missing.

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

If the original image is lossless (PNG or WebP lossless) then:

  • The WebP image set will be compressed with near_lossless option.
  • No AVIF image set will be created because AVIF lossless is not very good (1) 2.

If the original image is lossly (JPEG or WebP lossly) then:

  • The AVIF image set will be compressed with normal quality settings.
  • The WebP image set will be lossly compressed.

Demo

SOURCE

JAMPACKED

_jampack img_bass.svg 1891 img_bass.svg 1400img_jam.svg 6731 img_jam.svg 5201img_music.png 142036 img_music.png 142036 img_music.webp 58184img_screenshot.png 503173 img_screenshot.png 503173 img_screenshot.webp 172990img_water.jpg 1954704 img_water.jpg 1954704 img_water.webp 967992 [email protected] 243850 [email protected] 359436 [email protected] 480436 [email protected] 600316 [email protected] 709044 [email protected] 834940 [email protected] 141726index.html 1844 index.html 4340long-cat.jpg 139221 long-cat.jpg 139221picture_music.png 142036 picture_music.png 99128picture_redpanda.jpg 799292 picture_redpanda.jpg 259873 [email protected] 86677 [email protected] 91290 [email protected] 91062 [email protected] 123865 [email protected] 140307 [email protected] 133780 [email protected] 163369 [email protected] 197635 [email protected] 183738 [email protected] 217282 [email protected] 243216picture_screenshot.png 503173 picture_screenshot.png 497685 [email protected] 375446 [email protected] 172990plane.jpg 884197 plane.jpg 884197 plane.webp 374034 [email protected] 45770 [email protected] 69082 [email protected] 93532 [email protected] 124188 [email protected] 159072 [email protected] 197222 [email protected] 235488 [email protected] 279150 [email protected] 324544 [email protected] 371286tall-cat.jpg 1086066 tall-cat.jpg 703143 [email protected] 46859 [email protected] 84003 [email protected] 59208 [email protected] 63745 [email protected] 127865 [email protected] 87072 [email protected] 82156 [email protected] 180811 [email protected] 126922 [email protected] 106166 [email protected] 253373 [email protected] 185608 [email protected] 154589 [email protected] 344369 [email protected] 260858 [email protected] 239583 [email protected] 462370 [email protected] 338234 [email protected] 461675 [email protected] 470932

SOURCE

  • img_bass.svg 1891
  • img_jam.svg 6731
  • img_music.png 142036
  • img_screenshot.png 503173
  • img_water.jpg 1954704
  • index.html 1844
  • long-cat.jpg 139221
  • picture_music.png 142036
  • picture_redpanda.jpg 799292
  • picture_screenshot.png 503173
  • plane.jpg 884197
  • tall-cat.jpg 1086066

JAMPACKED

Source Open in new tab
Jampacked Open in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.30.0              |__| by β€Ήdivβ€ΊRIOTS

Options:
{ onlyoptim: true }


 PASS 1 - Optimizing 
β–Ά index.html
Done: 1:18.748 (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 β”‚      2 / 2 β”‚   2.71 MB β”‚    1.28 MB β”‚   -1.43 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     β”‚    11 / 11 β”‚   5.88 MB β”‚    3.05 MB β”‚   -2.83 MB β•‘
β•šβ•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•


 βœ” No issues