{"id":21412865,"url":"https://github.com/hunghg255/blur-images","last_synced_at":"2025-04-18T16:25:12.898Z","repository":{"id":240592846,"uuid":"803045181","full_name":"hunghg255/blur-images","owner":"hunghg255","description":" Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.","archived":false,"fork":false,"pushed_at":"2024-05-20T00:29:03.000Z","size":3628,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T01:51:19.073Z","etag":null,"topics":["blur","blur-backgrounds","blur-image","blur-image-converter","blurhash","image-processing","imagemagick","package","sharp"],"latest_commit_sha":null,"homepage":"https://blur-images.vercel.app","language":"TypeScript","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/hunghg255.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","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},"funding":{"github":["hunghg255"]}},"created_at":"2024-05-20T00:22:57.000Z","updated_at":"2025-03-05T23:14:35.000Z","dependencies_parsed_at":"2024-05-20T01:43:42.952Z","dependency_job_id":null,"html_url":"https://github.com/hunghg255/blur-images","commit_stats":null,"previous_names":["hunghg255/blur-images"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fblur-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fblur-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fblur-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fblur-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hunghg255","download_url":"https://codeload.github.com/hunghg255/blur-images/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249517889,"owners_count":21284854,"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":["blur","blur-backgrounds","blur-image","blur-image-converter","blurhash","image-processing","imagemagick","package","sharp"],"created_at":"2024-11-22T18:16:02.904Z","updated_at":"2025-04-18T16:25:12.851Z","avatar_url":"https://github.com/hunghg255.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hunghg255"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/blur-images\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\u003cimg src=\"https://api.iconify.design/material-symbols:photo-library-outline-rounded.svg?color=%23ff6190\" alt=\"logo\" width='100'/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/blur-images\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badge.fury.io/js/blur-images.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/blur-images\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/blur-images.svg?logo=npm\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=blur-images\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/blur-images\" alt=\"Minizip\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/blur-images/graphs/contributors\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/all_contributors-1-orange.svg\" alt=\"Contributors\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/blur-images/blob/main/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/hunghg255/blur-images\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Demo\n\n- [Demo](https://blur-images.vercel.app/)\n\n## Installation\n\n```bash\nnpm i blur-images\n```\n\n## Usage\n\n```js\nimport { blurImage } from 'blur-images';\nconst result = await blurImage('fixtures/brooklyn.jpg');\n```\n\nwhich outputs\n\n```js\n{\n  content: \u003cBuffer\u003e,\n  metadata: {\n    originalWidth: 1400,\n    originalHeight: 350,\n    width: 16,\n    height: 4,\n    type: 'webp',\n    dataURIBase64: 'data:image/webp;base64,UklGRkIAAABXRUJQVlA4IDYAAADQAQCdASoQAAQABUB8JYgCdADjazMu8AD+flCYsVr2GH6CLYVog1jhRLpBUIu8UmqhGnoAAAA='\n  }\n}\n```\n\n## How It Works\n\nThis package uses a very similar LQIP approach to the one used by [Medium](https://medium.com/).\n\nWe use `sharp` to resize input images to a max dimension of `16px` and output `webp` (default) or `jpeg` images with an encoding `quality` set to 20. The max dimension is a single, simple variable to tradeoff between encoded image size and visual fidelity.\n\nThis resuls in very efficient placeholder images that have noticeable artifacts due to the low quality encoding. These artifacts are then hidden in the browser using a simple blur filter.\n\n```css\n.placeholder {\n  filter: blur(20px);\n  transform: scale(1.1);\n}\n```\n\nNote that Medium uses this scale transform on its placeholder images for two reasons:\n\n- Hide the [artifacts around the edges](http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/) of the blurred images.\n- Provide an aesthetically pleasing feeling of zooming into the original image once it's loaded.\n\nAn alternative to using this `blur` + `transform` technique is to use a CSS [backdrop-filter](https://css-tricks.com/almanac/properties/b/backdrop-filter/). This technique has less [cross-browser support](https://caniuse.com/#search=backdrop-filter), but it produces clean blurred preview images without the need to transform the placeholder.\n\n```css\n.placeholder::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  backdrop-filter: blur(20px);\n  pointer-events: none;\n}\n```\n\n## Related\n\n- [lqip](https://github.com/zouhir/lqip) - Original Low Quality Image Placeholders (LQIP) module.\n- [sqip](https://github.com/axe312ger/sqip) - Really solid SVG-based LQIP alternative.\n  - See their comprehensive [comparison](https://axe312ger.github.io/sqip/) of LQIP techniques.\n  - The biggest disadvantage of this approach is that it's ~10-100x slower to compute these images.\n- [blurhash](https://github.com/woltapp/blurhash) - Really nice, compact placeholder images.\n  - Requires non-native client-side decoding which makes it awkward and slow for browser usage.\n  - Encoding speed is pretty slow (on par with sqip).\n  - Under the hood, the `webp` format performs a similar set of transforms as the one used by blurhash.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fblur-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunghg255%2Fblur-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fblur-images/lists"}