{"id":28205285,"url":"https://github.com/thangman22/frontend-image-encode","last_synced_at":"2025-07-28T19:38:56.646Z","repository":{"id":54983013,"uuid":"320305727","full_name":"thangman22/frontend-image-encode","owner":"thangman22","description":"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","archived":false,"fork":false,"pushed_at":"2023-11-10T14:42:51.000Z","size":16175,"stargazers_count":61,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-17T08:13:34.616Z","etag":null,"topics":["image-compression","wasm"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thangman22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-10T15:01:15.000Z","updated_at":"2025-03-06T08:41:46.000Z","dependencies_parsed_at":"2022-08-14T08:10:20.083Z","dependency_job_id":null,"html_url":"https://github.com/thangman22/frontend-image-encode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thangman22/frontend-image-encode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangman22%2Ffrontend-image-encode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangman22%2Ffrontend-image-encode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangman22%2Ffrontend-image-encode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangman22%2Ffrontend-image-encode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thangman22","download_url":"https://codeload.github.com/thangman22/frontend-image-encode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangman22%2Ffrontend-image-encode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259816084,"owners_count":22915809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-compression","wasm"],"created_at":"2025-05-17T08:14:25.527Z","updated_at":"2025-06-14T12:30:34.268Z","avatar_url":"https://github.com/thangman22.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Image compression\n\nThis is script and implementation of frontend image compression, convert, rotate, resize based on codecs in [Google/Squoosh](https://github.com/GoogleChromeLabs/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\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n    import { loadImage, encodeWebP, encodeWebP2, encodeAvif, encodeJpeg, encodeJxl, rotateImage, resizeImage, encodeOnixPng, quantizeImage, resizePixelImage } from \"https://cdn.jsdelivr.net/gh/thangman22/frontend-image-encode@main/index.js\";\n\n    // Load image before encode \n    const image = await loadImage(\"./assets/images/example.jpg\");\n\n    // Define options is nees\n    const options = {\n        minQuantizer: 33,\n        maxQuantizer: 63,\n        minQuantizerAlpha: 33,\n        maxQuantizerAlpha: 63,\n        tileColsLog2: 0,\n        tileRowsLog2: 0,\n        speed: 8,\n        subsample: 1,\n        module: {\n            avifEncJs: \"/codecs/avif/enc/avif_enc.js\"\n        }\n    }\n\n    // Call function to encode image return is base64 format\n    const webPImageResult = await encodeAvif(image, options);\n\n    document.getElementById('webp-image').src = webPImageResult\n\u003c/script\u003e\n```\n\n## Available methods \u0026 options\n\n### Encode WEBP\n\nConvert image to WEBP format with https://github.com/webmproject/libwebp\n\n```javascript\n// Available \u0026 Default options\nconst options = {\n    quality: 75,\n    target_size: 0,\n    target_PSNR: 0,\n    method: 4,\n    sns_strength: 50,\n    filter_strength: 60,\n    filter_sharpness: 0,\n    filter_type: 1,\n    partitions: 0,\n    segments: 4,\n    pass: 1,\n    show_compressed: 0,\n    preprocessing: 0,\n    autofilter: 0,\n    partition_limit: 0,\n    alpha_compression: 1,\n    alpha_filtering: 1,\n    alpha_quality: 100,\n    lossless: 0,\n    exact: 0,\n    image_hint: 0,\n    emulate_jpeg_size: 0,\n    thread_level: 0,\n    low_memory: 0,\n    near_lossless: 100,\n    use_delta_palette: 0,\n    use_sharp_yuv: 0,\n    module: {\n        webpEncJs: \"/codecs/webp/enc/webp_enc.js\"\n    }\n}\n\n// Call function to encode image return is base64 format\nconst result = await encodeWebP(image, options);\n```\n---\n### Encode AVIF\n\nConvert image to AVIF format\n\n```javascript\n// Available \u0026 Default options\nconst options = {\n    minQuantizer: 33,\n    maxQuantizer: 63,\n    minQuantizerAlpha: 33,\n    maxQuantizerAlpha: 63,\n    tileColsLog2: 0,\n    tileRowsLog2: 0,\n    speed: 8,\n    subsample: 1,\n    module: {\n        avifEncJs: \"/codecs/avif/enc/avif_enc.js\"\n    }\n}\n\n// Call function to encode image return is base64 format\nconst result = await encodeWebP(image, options);\n```\n---\n### Encode JPEG\n\nEncode JPEG image with mozjpeg\n\n```javascript\n// Available \u0026 Default options\nconst options = {\n    quality: 75,\n    baseline: false,\n    arithmetic: false,\n    progressive: true,\n    optimize_coding: true,\n    smoothing: 0,\n    color_space: 3 /*YCbCr*/,\n    quant_table: 3,\n    trellis_multipass: false,\n    trellis_opt_zero: false,\n    trellis_opt_table: false,\n    trellis_loops: 1,\n    auto_subsample: true,\n    chroma_subsample: 2,\n    separate_chroma_quality: false,\n    chroma_quality: 75,\n    module: {\n        mozjpegEncJs: \"/codecs/mozjpeg/enc/mozjpeg_enc.js\"\n    }\n}\n\n// Call function to encode image return is base64 format\nconst result = await encodeJpeg(image, options);\n```\n---\n### Encode PNG\n\nEncode PNG image with oxipng\n\n```javascript\n// Available \u0026 Default options\nconst options = {\n    level: 2,\n    module: {\n        pngEncDecJs: \"/codecs/png/pkg/squoosh_png.js\",\n        oxipngEncJs: \"/codecs/oxipng/pkg/squoosh_oxipng.js\",\n        squooshPngBgWasm: \"/codecs/png/pkg/squoosh_png_bg.wasm\",\n        squooshOxipngBgWasm: \"/codecs/oxipng/pkg/squoosh_oxipng_bg.wasm\"\n    }\n}\n\n// Call function to encode image return is base64 format\nconst result = await encodeOnixPng(image, options);\n```\n---\n### Rotate Image\n\n```javascript\nconst degree = 90\n// Call function to encode image return is base64 format\nconst result = await rotateImage(image, degree);\n```\n---\n### Resize Image\n```javascript\nconst outputWidth = 300\nconst outputHeight = 300\nconst options = {\n    method: 3, // triangle = 0, catrom = 1, mitchell = 2, lanczos3 = 3\n    fitMethod: 'stretch',\n    premultiply: true,\n    linearRGB: true,\n    module: {\n        squooshResizeJs: \"/codecs/resize/pkg/squoosh_resize.js\",\n        squooshResizeBgWasm: \"/codecs/resize/pkg/squoosh_resize_bg.wasm\"\n    }\n}\nconst aspectRatio = true\n\n// Call function to encode image return is base64 format\nconst result = await resizeImage(image, outputWidth, outputHeight, options, aspectRatio)\n```\n---\n### Resize Pixel Art Image\n```javascript\nconst options = {\n    factor: 2,\n    module: {\n        squooshhqxJs: \"/codecs/hqx/pkg/squooshhqx.js\",\n        squooshhqxBgWasm: \"/codecs/hqx/pkg/squooshhqx_bg.wasm\"\n    }\n}\nconst result = await resizePixelImage(image, options)\n```\n---\n### Reduce Color of Image\n```javascript\nconst options = {\n    numColors: 255,\n    dither: 1.0,\n    module: {\n        imagequantJs: \"/codecs/imagequant/imagequant.js\"\n    }\n}\nconst result = await quantizeImage(image, options)\n```\n---\n\n*** Browser Not Support yet ***\n\n### encode WEBP2\n```javascript\nconst options = {\n    quality: 75,\n    alpha_quality: 75,\n    effort: 5,\n    pass: 1,\n    sns: 50,\n    uv_mode: 0 /*UVMode.UVModeAuto*/,\n    csp_type: 0 /*Csp.kYCoCg*/,\n    error_diffusion: 0,\n    use_random_matrix: false,\n    module: {\n        wp2EncJs : \"/codecs/wp2/enc/wp2_enc.js\"\n    }\n}\nconst result = await encodeWebP2(image, options)\n```\n---\n### encode JPEGXL\n```javascript\nconst options = {\n    speed: 4,\n    quality: 75,\n    progressive: false,\n    epf: -1,\n    nearLossless: 0,\n    lossyPalette: false,\n    module: {\n        jxlEncJs: \"/codecs/jxl/enc/jxl_enc.js\"\n    }\n}\nconst result = await encodeJxl(image, options)\n```\n---\n\n## Todo\n\n- [ ] Support Web Worker (Not check yet)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangman22%2Ffrontend-image-encode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthangman22%2Ffrontend-image-encode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangman22%2Ffrontend-image-encode/lists"}