Frontend Image compression

This is script and implementation of frontend image compression, convert, rotate, resize based on codecs in Google/Squoosh. All codecs are copy from the Squoosh repo without modifying. if you want to pre-process images before uploading them to the server, please use this repo for reference

Usage

<script type="module">
    import { loadImage, encodeWebP, encodeWebP2, encodeAvif, encodeJpeg, encodeJxl, rotateImage, resizeImage, encodeOnixPng, quantizeImage, resizePixelImage } from "./lib.js";

    // Load image before encode 
    const image = await loadImage("./assets/images/example.jpg");

    // Define options is nees
    const options = {
        minQuantizer: 33,
        maxQuantizer: 63,
        minQuantizerAlpha: 33,
        maxQuantizerAlpha: 63,
        tileColsLog2: 0,
        tileRowsLog2: 0,
        speed: 8,
        subsample: 1,
        module: {
            avifEncJs: "/squoosh/codecs/avif/enc/avif_enc.js"
        }
    }

    // Call function to encode image return is base64 format
    const webPImageResult = await encodeAvif(image, options);

    document.getElementById('webp-image').src = webPImageResult
</script>

Available methods & options

Encode WEBP

Convert image to WEBP format with https://github.com/webmproject/libwebp

// Available & Default options
const options = {
    quality: 75,
    target_size: 0,
    target_PSNR: 0,
    method: 4,
    sns_strength: 50,
    filter_strength: 60,
    filter_sharpness: 0,
    filter_type: 1,
    partitions: 0,
    segments: 4,
    pass: 1,
    show_compressed: 0,
    preprocessing: 0,
    autofilter: 0,
    partition_limit: 0,
    alpha_compression: 1,
    alpha_filtering: 1,
    alpha_quality: 100,
    lossless: 0,
    exact: 0,
    image_hint: 0,
    emulate_jpeg_size: 0,
    thread_level: 0,
    low_memory: 0,
    near_lossless: 100,
    use_delta_palette: 0,
    use_sharp_yuv: 0,
    module: {
        webpEncJs: "/squoosh/codecs/webp/enc/webp_enc.js"
    }
}

// Call function to encode image return is base64 format
const result = await encodeWebP(image, options);

Encode AVIF

Convert image to AVIF format

// Available & Default options
const options = {
    minQuantizer: 33,
    maxQuantizer: 63,
    minQuantizerAlpha: 33,
    maxQuantizerAlpha: 63,
    tileColsLog2: 0,
    tileRowsLog2: 0,
    speed: 8,
    subsample: 1,
    module: {
        avifEncJs: "/squoosh/codecs/avif/enc/avif_enc.js"
    }
}

// Call function to encode image return is base64 format
const result = await encodeWebP(image, options);

Encode JPEG

Encode JPEG image with mozjpeg

// Available & Default options
const options = {
    quality: 75,
    baseline: false,
    arithmetic: false,
    progressive: true,
    optimize_coding: true,
    smoothing: 0,
    color_space: 3 /*YCbCr*/,
    quant_table: 3,
    trellis_multipass: false,
    trellis_opt_zero: false,
    trellis_opt_table: false,
    trellis_loops: 1,
    auto_subsample: true,
    chroma_subsample: 2,
    separate_chroma_quality: false,
    chroma_quality: 75,
    module: {
        mozjpegEncJs: "/squoosh/codecs/mozjpeg/enc/mozjpeg_enc.js"
    }
}

// Call function to encode image return is base64 format
const result = await encodeJpeg(image, options);

Encode PNG

Encode PNG image with oxipng

// Available & Default options
const options = {
    level: 2,
    module: {
        pngEncDecJs: "/squoosh/codecs/png/pkg/squoosh_png.js",
        oxipngEncJs: "/squoosh/codecs/oxipng/pkg/squoosh_oxipng.js",
        squooshPngBgWasm: "/squoosh/codecs/png/pkg/squoosh_png_bg.wasm",
        squooshOxipngBgWasm: "/squoosh/codecs/oxipng/pkg/squoosh_oxipng_bg.wasm"
    }
}

// Call function to encode image return is base64 format
const result = await encodeOnixPng(image, options);

Rotate Image

const degree = 90
// Call function to encode image return is base64 format
const result = await rotateImage(image, degree);

Resize Image

const outputWidth = 300
const outputHeight = 300
const options = {
    method: 3, // triangle = 0, catrom = 1, mitchell = 2, lanczos3 = 3
    fitMethod: 'stretch',
    premultiply: true,
    linearRGB: true,
    module: {
        squooshResizeJs: "/squoosh/codecs/resize/pkg/squoosh_resize.js",
        squooshResizeBgWasm: "/squoosh/codecs/resize/pkg/squoosh_resize_bg.wasm"
    }
}
const aspectRatio = true

// Call function to encode image return is base64 format
const result = await resizeImage(image, outputWidth, outputHeight, options, aspectRatio)

Resize Pixel Art Image

const options = {
    factor: 2,
    module: {
        squooshhqxJs: "/squoosh/codecs/hqx/pkg/squooshhqx.js",
        squooshhqxBgWasm: "/squoosh/codecs/hqx/pkg/squooshhqx_bg.wasm"
    }
}
const result = await resizePixelImage(image, options)

Reduce Color of Image

const options = {
    numColors: 255,
    dither: 1.0,
    module: {
        imagequantJs: "/squoosh/codecs/imagequant/imagequant.js"
    }
}
const result = await quantizeImage(image, options)

*** Browser Not Support yet ***

encode WEBP2

const options = {
    quality: 75,
    alpha_quality: 75,
    effort: 5,
    pass: 1,
    sns: 50,
    uv_mode: 0 /*UVMode.UVModeAuto*/,
    csp_type: 0 /*Csp.kYCoCg*/,
    error_diffusion: 0,
    use_random_matrix: false,
    module: {
        wp2EncJs : "/squoosh/codecs/wp2/enc/wp2_enc.js"
    }
}
const result = await encodeWebP2(image, options)

encode JPEGXL

const options = {
    speed: 4,
    quality: 75,
    progressive: false,
    epf: -1,
    nearLossless: 0,
    lossyPalette: false,
    module: {
        jxlEncJs: "/squoosh/codecs/jxl/enc/jxl_enc.js"
    }
}
const result = await encodeJxl(image, options)

Todo

• [ ] Support Web Worker (Not check yet)