{"id":15016608,"url":"https://github.com/tigersway/browsersync-images-middleware","last_synced_at":"2025-10-05T06:02:40.318Z","repository":{"id":57190512,"uuid":"315816579","full_name":"TigersWay/browsersync-images-middleware","owner":"TigersWay","description":"browser-sync development middleware to resize and transform local images (fake-CDN features)","archived":false,"fork":false,"pushed_at":"2021-10-14T03:24:56.000Z","size":1507,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-24T13:11:00.106Z","etag":null,"topics":["browser-sync","browsersync","cdn","eleventy","image-processing","images","middleware","transformation"],"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/TigersWay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-25T03:18:27.000Z","updated_at":"2023-02-16T02:41:18.000Z","dependencies_parsed_at":"2022-08-27T10:41:23.730Z","dependency_job_id":null,"html_url":"https://github.com/TigersWay/browsersync-images-middleware","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TigersWay%2Fbrowsersync-images-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TigersWay%2Fbrowsersync-images-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TigersWay%2Fbrowsersync-images-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TigersWay%2Fbrowsersync-images-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TigersWay","download_url":"https://codeload.github.com/TigersWay/browsersync-images-middleware/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239985505,"owners_count":19729511,"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":["browser-sync","browsersync","cdn","eleventy","image-processing","images","middleware","transformation"],"created_at":"2024-09-24T19:49:08.258Z","updated_at":"2025-10-05T06:02:40.204Z","avatar_url":"https://github.com/TigersWay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# browsersync-images-middleware  ![GitHub last commit](https://img.shields.io/github/last-commit/tigersway/browsersync-images-middleware?style=flat-square) ![GitHub issues](https://img.shields.io/github/issues/tigersway/browsersync-images-middleware?style=flat-square)\n\nbrowser-sync development middleware to resize and transform local images (fake-CDN features)\n\n\n## Install  [![npm](https://img.shields.io/npm/v/browsersync-images-middleware?style=flat-square)](https://www.npmjs.com/package/browsersync-images-middleware)\n\n```\nnpm i -D browsersync-images-middleware sharp\n```\n\n## Setup and features\n\n1. Wherever you use browser-sync, add the middleware option, like this:\n    ```\n        ...\n        middleware: [{\n          route: '/img',\n          handle: require('browsersync-images-middleware')('public')\n        }],\n        ...\n    ```\n    - `[img]` Your chosen route. Can be anything, as long as you set your filter the same way.\n    - `[public]` The root path of your images, probably your published/destination folder.\n\n2. and provide for your templates, a simple function, helper, filter, etc to mimic your favorite CDN's important features.\n  With these parameters/options:\n    - width                                 w=200\n    - height                                h=300\n    - dpr (default `1`)                     d=3\n    - resize smart/fit (default `smart`)    s=fit\n    - force webp/avif/auto                  f=auto\n\n    to build these (random) url:\n    - `/img/w=200,f=webp/image/somewhere/cat.jpg`\n    - `/img/w=300,h=300/image/anotherpath/dog.png`\n    - `/img/w=400,h=200,s=fit,f=auto/image/tree/bird.jpg`\n\n## Demos\n\nYou can clone/download the github repository where you will find some demos.\n\nA handlebars\u0026trade; demo [here](https://github.com/TigersWay/browsersync-images-middleware/tree/main/demo) with its simpliest helper:\n```js\nHandlebars.registerHelper('cdn', (imagePath, options) =\u003e {\n  const o = options.hash;\n  return `/img/`\n    + `w=${o.width}`\n    + `${o.height ? ',h='+o.height : ''}`\n    + `${o.force ? ',f='+o.force : ''}`\n    + `${imagePath}`;\n});\n```\n\nOr a Eleventy\u0026trade; one [there](https://github.com/TigersWay/browsersync-images-middleware/tree/main/11ty-sample) with a basic filter:\n```js\neleventyConfig.addFilter('cdn', (imagePath, width, height, force) =\u003e {\n  return `/img/`\n    + `w=${width}`\n    + `${height ? ',h='+height : ''}`\n    + `${force ? ',f='+force : ''}`\n    + `${imagePath}`;\n});\n```\n\n## CHANGELOG\n\n**v2.0.1**\n - sharp peer dependency corrected\n\n**v2.0.0**\n- BREAKING: sharp is now a peerDependency, you must install it seperately\n\n**v1.0.0**\n- Automatic smartcrop can now be changed to fit\n- WebP, AVIF and auto mode (Thanks to [sharp](https://github.com/lovell/sharp))\n\n**v0.4.x**\n- Correction: URL is now \"URI decoded\"\n- Added png images\n\n**v0.2.0**\n- [Eleventy](https://www.11ty.dev/) sample\n- Added option: DPR\n\n**v0.1.0**\n- Initial upload\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftigersway%2Fbrowsersync-images-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftigersway%2Fbrowsersync-images-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftigersway%2Fbrowsersync-images-middleware/lists"}