DOCSEARCHbyAlgolia
Submit Docs

Squoosh

repository·dev·Indexed 12 days ago

https://github.com/googlechromelabs/squoosh

An image compression web application that performs compression tasks locally in the browser. It includes a suite of codecs for formats like AVIF, WebP, and WebP2, as well as tools for quantization (ImageQuant) and resizing (HQX). The project provides a framework for implementing decoders, encoders, processors, and preprocessors using WebAssembly and Docker-based build pipelines.

Tokens
19.7K
Snippets
79
Records
109
Agent score
98%

What's inside Squoosh

  3. Understand Squoosh feature types

    dev

    Squoosh categorizes features into four distinct types based on their role in the image processing pipeline:

    • decoders: Used to decode images.
    • encoders: Used to encode images.
    • processors: Used to change images, typically to aid compression.
    • preprocessors: Used to prepare the image for handling. Unlike processors, which can operate differently on each 'side' (input vs output), preprocessors are applied to both sides.

  4. Privacy and Data Handling in Squoosh

    dev

    Squoosh processes all image compression locally on your device; images are never sent to a server.

    However, the application uses Google Analytics to collect the following metadata:

    • Basic visitor data.
    • Before and after image size values.
    • For Squoosh PWA: the type of installation, and the installation time and date.

  5. Load and use built Squoosh codecs

    dev

    When you build a codec, it generates a .js file and a .wasm file. Loading the .js file creates a global object named <codec name>_<enc or dec> which follows the Emscripten Module API.

    Important: To ensure the .wasm file is loaded correctly, you will likely need to configure the Module["locateFile"] function to point to the correct path of the .wasm file.

  6. Feature folder structure and visibility

    dev

    When developing a feature, files are organized into specific folders that determine their scope and visibility:

    • client/: Files included in the client project.
    • worker/: Files included in the worker project.
    • shared/: Files included in the shared project. Both the client and worker projects have access to the shared project.

  7. General restrictions and disclaimers for libjpeg-turbo

    dev

    When using libjpeg-turbo, observe the following universal restrictions:

    • No Endorsement: You cannot use the name of the IJG, The libjpeg-turbo Project, or its contributors in advertising, publicity, or to endorse/promote products derived from this software without specific prior written permission.
    • No Warranty: The IJG and The libjpeg-turbo Project do not warrant the software to be free of defects and accept no liability for undesirable consequences resulting from its use.

  8. Build Squoosh codecs using Docker

    dev

    Each codec sub-project in the codecs/ directory is a self-contained project that can be built using Docker. To build a codec, run the following commands within the specific codec's directory:

    1. Install dependencies: npm install
    2. Run the build script: npm run build

    Successful builds produce two files:

    • <codec name>_<enc or dec>.js
    • <codec name>_<enc or dec>.wasm
    $ npm install
$ npm run build

  10. Build the visdif codec using Docker and Emscripten

    dev

    The visdif codec requires a manual monkey-patch of the Emscripten dlmalloc.c file to adjust the MALLOC_ALIGNMENT definition before building. Follow these steps within a Docker container to patch the environment and compile the codec.

    1. Start the Docker container with the source mounted.
    2. Apply the patch to /emsdk/upstream/emscripten/system/lib/dlmalloc.c to change the alignment from 16U to 2 * sizeof(void *).
    3. Clear the Emscripten cache.
    4. Rebuild libdlmalloc using embuilder.
    5. Compile the codec using emmake make.
    $ docker run --rm -it -v $(PWD):/src squoosh-cpp "/bin/bash"

# Apply the patch to dlmalloc.c
# cat << EOF | patch /emsdk/upstream/emscripten/system/lib/dlmalloc.c
# 659c659
# < #define MALLOC_ALIGNMENT ((size_t)(2 * sizeof(void *)))
# ---
# > #define MALLOC_ALIGNMENT ((size_t)(16U))
# EOF

# Build steps
# emcc --clear-cache
# /emsdk/upstream/embuilder build libdlmalloc --force
# emmake make

  11. Comply with libjpeg-turbo licenses when distributing source code

    dev

    If you are distributing a modified version of the libjpeg-turbo source code, you must adhere to the following requirements:

    1. Preserve Notices: Do not alter or remove any existing copyright or license notices from the source.
    2. Add Modifications Notice: Add your own copyright notice to the header of every source file you have modified. If the file lacks a header, add a notice stating that you modified the file.
    3. Include IJG README: You must include the README.ijg file in your distribution and must not alter any of its copyright or license text.

  12. Set up a local development environment for Squoosh

    dev

    To develop for Squoosh locally, you need to clone the repository, install the necessary Node packages, build the application, and then start the development server. Ensure you have npm installed on your system.

    # 1. Clone the repository
# (Use your preferred git client)

# 2. Install node packages
npm install

# 3. Build the app
npm run build

# 4. Start the development server
npm run dev