{"id":27512058,"url":"https://github.com/chenaski/gulp-squoosh","last_synced_at":"2025-04-17T23:29:48.836Z","repository":{"id":37093132,"uuid":"380789048","full_name":"chenaski/gulp-squoosh","owner":"chenaski","description":"A tiny wrapper around libSquoosh for use in gulp tasks.","archived":false,"fork":false,"pushed_at":"2023-02-20T11:57:48.000Z","size":4409,"stargazers_count":9,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T15:13:52.338Z","etag":null,"topics":["avif","gulp-plugin","image-processing","jxl","mozjpeg","nodejs","optimization","webp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/chenaski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-27T16:34:22.000Z","updated_at":"2023-02-27T05:44:51.000Z","dependencies_parsed_at":"2024-06-19T01:34:59.100Z","dependency_job_id":"602ba6d1-ff24-435c-ac63-170d1ae19e2a","html_url":"https://github.com/chenaski/gulp-squoosh","commit_stats":{"total_commits":137,"total_committers":3,"mean_commits":"45.666666666666664","dds":0.4817518248175182,"last_synced_commit":"84ad65818e78ccaaed5f7d9c15763104a22decac"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fgulp-squoosh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fgulp-squoosh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fgulp-squoosh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fgulp-squoosh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenaski","download_url":"https://codeload.github.com/chenaski/gulp-squoosh/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248555370,"owners_count":21123881,"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":["avif","gulp-plugin","image-processing","jxl","mozjpeg","nodejs","optimization","webp"],"created_at":"2025-04-17T23:29:48.248Z","updated_at":"2025-04-17T23:29:48.829Z","avatar_url":"https://github.com/chenaski.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-squoosh\n\nGulp plugin to compress images using [Squoosh](https://github.com/GoogleChromeLabs/squoosh).\n\n\u003e The library this plugin covers is [going to be deprecated](https://github.com/GoogleChromeLabs/squoosh/pull/1266#issuecomment-1208149979),\n\u003e so you would better consider using another [alternative](https://github.com/lovell/sharp).\n\n![github `test` workflow status](https://github.com/chenaski/gulp-squoosh/actions/workflows/test.yml/badge.svg)\n![npm version](https://img.shields.io/npm/v/gulp-squoosh)\n![license](https://img.shields.io/npm/l/gulp-squoosh)\n![npm downloads](https://img.shields.io/npm/dm/gulp-squoosh)\n![nodejs support](https://img.shields.io/node/v/gulp-squoosh)\n[![coverage](https://coveralls.io/repos/github/chenaski/gulp-squoosh/badge.svg?branch=main)](https://coveralls.io/github/chenaski/gulp-squoosh?branch=main)\n\n## Installation\n\n```\nnpm i -D gulp-squoosh\n```\n\n## Usage\n\n```js\nconst gulp = require(\"gulp\");\nconst gulpSquoosh = require(\"gulp-squoosh\");\n\nfunction processImages() {\n  return gulp.src(\"src/images/**\").pipe(gulpSquoosh()).pipe(gulp.dest(\"dist/images\"));\n}\n```\n\n## Configuration\n\nPlugin uses the same options object as the original library, without any additions.\n\nSo, to get actual information about the available options, see [libSqooush](https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/README.md).\n\nAnd you can also check [this issue](https://github.com/chenaski/gulp-squoosh/issues/56).\n\n```js\ngulpSquoosh({\n  preprocessOptions: {...},\n  encodeOptions: {...},\n});\n\ngulpSquoosh(({ width, height, size }) =\u003e ({\n  preprocessOptions: {...},\n  encodeOptions: {...},\n}));\n```\n\n```js\nconst DEFAULT_ENCODE_OPTIONS = {\n  mozjpeg: {},\n  webp: {},\n  avif: {},\n  jxl: {},\n  oxipng: {},\n};\n```\n\n## Example\n\nYou can see full source code of the example [here](example/cjs/gulpfile.js).\n\nWith growing adoption of ES modules, more and more libraries [drop CommonJS support](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\nDespite the fact this library doesn't support ESM, you can continue to use it in your ESM projects,\n[here is an example](example/esm/gulpfile.js).\n\n```js\nconst gulp = require(\"gulp\");\nconst gulpSquoosh = require(\"gulp-squoosh\");\nconst gulpCache = require(\"gulp-cache\");\n\nconst SOURCE = \"src/images/**\";\nconst DESTINATION = \"build/images\";\n\nfunction processImages() {\n  return gulp\n    .src(SOURCE)\n    .pipe(\n      gulpCache(\n        gulpSquoosh(({ width, height, size, filePath }) =\u003e ({\n          preprocessOptions: {\n            resize: {\n              width: width * 0.5,\n            },\n          },\n          encodeOptions: {\n            jxl: {},\n            avif: {},\n            webp: {},\n            // wp2: {}\n            ...(path.extname(filePath) === \".png\" ? { oxipng: {} } : { mozjpeg: {} }),\n          },\n        }))\n      )\n    )\n    .pipe(gulp.dest(DESTINATION));\n}\n```\n\nThen you can use converted images with [`\u003cpicture\u003e`](https://web.dev/learn/design/picture-element/) tag:\n\n```html\n\u003cpicture\u003e\n  \u003csource srcset=\"image.jxl\" type=\"image/jxl\" /\u003e\n  \u003csource srcset=\"image.avif\" type=\"image/avif\" /\u003e\n  \u003csource srcset=\"image.webp\" type=\"image/webp\" /\u003e\n  \u003cimg src=\"image.jpg\" alt=\"fill out me\" /\u003e\n\u003c/picture\u003e\n```\n\n## Troubleshooting\n\n### WASM memory error\n\nYou cannot run multiple `gulp-squoosh` tasks in parallel (via `gulp.parallel`) because you will get a `wasm memory error`.\nBut you can just replace it with `gulp.serial`, it will not affect the speed:\n\n```js\ngulp.parallel(/* ... */ compressImages, /* ... */ compressOtherImages);\n\n// become\n\ngulp.parallel(/* ... */ gulp.series(compressImages, compressOtherImages) /* ... */);\n```\n\n## Useful links\n\n- https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/\n- https://www.industrialempathy.com/posts/image-optimizations/\n- https://www.industrialempathy.com/posts/avif-webp-quality-settings/\n- https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenaski%2Fgulp-squoosh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenaski%2Fgulp-squoosh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenaski%2Fgulp-squoosh/lists"}