Squish: Batch Browser-based Image Compression with WebAssembly
Summary
Squish is an innovative, browser-based image compression tool that leverages WebAssembly for high-performance optimization directly in your browser. It supports a wide array of formats including AVIF, JPEG, JPEG XL, PNG, and WebP, offering features like batch processing, format conversion, and real-time previews through an intuitive drag-and-drop interface. This tool provides a private and efficient way to optimize images without server uploads.
Repository Info
Tags
Click on any tag to explore related repositories
Introduction
Squish is an innovative, browser-based image compression tool designed for efficient and high-performance image optimization. Developed by Addy Osmani, it leverages WebAssembly to perform image processing directly within your browser, eliminating the need for server uploads and ensuring privacy. Squish supports a comprehensive range of modern image formats, including AVIF, JPEG, JPEG XL, PNG, and WebP, making it a versatile solution for web developers and content creators alike.
Installation
To get Squish up and running for development or local use, follow these steps.
Prerequisites
- Node.js 18 or later
- npm 7 or later
Steps
- Clone the repository:
git clone https://github.com/addyosmani/squish.git cd squish - Install dependencies:
npm install - Start the development server:
npm run dev - Build for production:
npm run build
Examples (Usage)
Using Squish is straightforward, thanks to its intuitive drag-and-drop interface.
- Drop or Select Images: Drag and drop your images onto the designated upload area, or click to browse and select files from your system.
- Choose Output Format: Select your desired output format from the available options: AVIF, JPEG, JPEG XL, PNG, or WebP.
- Adjust Quality: Utilize the quality slider to fine-tune the balance between file size and image quality for each format.
- Download: Download individual optimized images, or use the "Download All" button for convenient batch downloads.
Why Use Squish
Squish stands out as a powerful image compression tool due to several key advantages:
- Browser-Based & Private: All processing happens client-side, meaning your images never leave your browser, ensuring privacy and security.
- High Performance: By utilizing WebAssembly, Squish achieves near-native speed for image processing, making optimization fast and efficient.
- Batch Processing: Optimize multiple images simultaneously, significantly saving time and effort.
- Extensive Format Support: Supports modern and widely used formats like AVIF, JPEG, JPEG XL, PNG, and WebP, along with format conversion capabilities.
- Intuitive User Interface: A drag-and-drop interface, real-time preview, and size reduction statistics provide a seamless user experience.
Links
- GitHub Repository: https://github.com/addyosmani/squish