How to bulk compress images with command line and get a Faster Website

In the ever-evolving landscape of the internet, website performance stands as a pivotal factor in user satisfaction. Slow-loading pages can lead to frustration, increased bounce rates, and diminished user engagement. That’s where Squashify comes into play, a game-changing package that promises not only efficiency but a seamless way to compress and optimize images, ensuring your website performs at its peak.

First, here is the link to the repo!
https://github.com/wp-blocks/squashify

And here is the Docs
https://wp-blocks.github.io/squashify/index.html#md:how-use-this

Understanding Squashify’s Core Features

Efficiency at Its Core: The heart of Squashify lies in its ability to compress and optimize images using a repertoire of advanced algorithms. This isn’t just about shaving off a few kilobytes; it’s a strategic approach to reducing file sizes, resulting in a website that not only loads faster but also saves bandwidth.

Format Flexibility: Squashify is a versatile powerhouse, supporting a plethora of image formats. Whether your website is laden with JPGs, PNGs, GIFs, SVGs, TIFFs, AVIFs, or WebPs, Squashify handles the compression with finesse. No image format is left unattended.

Web Optimization Magic: The magic happens when Squashify generates compressed images that are tailor-made for the web. Say goodbye to excessive data usage, and hello to improved website performance and SEO rankings.

Speed Unleashed: Speed matters, and Squashify understands that. With optimized algorithms and parallel processing, it ensures that the compression process is not just efficient but downright lightning-fast. No more twiddling your thumbs waiting for images to be optimized.

Reliability in TypeScript: Written in strict TypeScript, Squashify brings a level of reliability and bulletproof performance to image compression. It’s not just a tool; it’s a dependable asset in your toolkit.

Command-Line Mastery: Squashify integrates seamlessly into your workflow with CLI and configuration file options. Whether you’re a command-line aficionado or prefer a more configured setup, Squashify caters to your needs.

Embarking on the Squashify Journey: How to Use It

As Script

To run the squashify command using a Node.js script in your package.json file, you can add the following code to your scripts section:

{
  "scripts": {
    "squashify": "npx squashify --in ./old --out ./new"
  }
}

as Dependency

To use squashify as a dependency in your project, simply include it in your package.json file:

{
  "dependencies": {
    "squashify": "^1.0.0"
  }
}

Then, in your project code, you can import the package and use it as follows:

const { compressImages } = require('squashify');

// Define source and destination directories
const sourceDir = 'path/to/source';
const destinationDir = 'path/to/destination';

// Define options for image compression
const options = {
  jpeg: { compressor: 'mozjpeg', quality: 85, progressive: true },
  png: { compressor: 'avif', quality: 80 },
  svg: { plugins: 'CleanupAttrs, RemoveDoctype' }
};

// Call the compressImages function with the defined parameters
compressImages(sourceDir, destinationDir, options);

Interactive Mode

npx squashify --interactive

The script will prompt you to enter the source and destination directory paths. After entering the directories, the script will show the list of image formats available in the source directory. You can choose the compression options for each format.

Using a preset / INI file

In order to get the same configuration across websites or simply in order to have a reproducible configuration you may want to add to you project root a “.squash” file with this content

[path]
in = src/img
out = img

[.jpg]
compressor = mozjpeg
quality = 85
progressive = true

[.png]
compressor = webp
quality = 80

[.svg]
options = CleanupAttrs, RemoveDoctype, RemoveXMLProcInst, RemoveComments, RemoveMetadata, RemoveXMLNS, RemoveEditorsNSData, RemoveTitle, RemoveDesc, RemoveUselessDefs, RemoveEmptyAttrs, RemoveHiddenElems, RemoveEmptyContainers, RemoveEmptyText, RemoveUnusedNS, ConvertShapeToPath, SortAttrs, MergePaths, SortDefsChildren, RemoveDimensions, RemoveStyleElement, RemoveScriptElement, InlineStyles, removeViewBox, removeElementsByAttr, cleanupIDs, convertColors, removeRasterImages, removeUselessStrokeAndFill, removeNonInheritableGroupAttrs

Before you embark on this compression journey, then run:

npx squashify

in a very few ms squashify will compress the contents of the target folder following the settings it found in the configuration file

Interactive mode👇

Conclusion: A Faster Website Awaits

In a world where every millisecond counts, Squashify emerges as a beacon of hope for website owners and developers. It’s not just about compressing images; it’s about transforming your website into a sleek, optimized powerhouse.

Give Squashify a spin, and witness the metamorphosis of your website’s performance. Your users will thank you for the faster, more efficient experience. It’s time to embrace the future of image compression with Squashify. 💡🚀