{"id":18751154,"url":"https://github.com/substrate-system/blur-image","last_synced_at":"2026-01-25T12:31:10.876Z","repository":{"id":241912954,"uuid":"807396369","full_name":"substrate-system/blur-image","owner":"substrate-system","description":"Blur-up image component","archived":false,"fork":false,"pushed_at":"2025-10-01T10:08:34.000Z","size":1319,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T17:40:04.399Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/blur-image/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.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,"zenodo":null}},"created_at":"2024-05-29T02:57:58.000Z","updated_at":"2025-09-03T04:09:17.000Z","dependencies_parsed_at":"2024-05-30T18:17:45.733Z","dependency_job_id":"5d53e7ce-8f65-489c-b59d-1939038c0b21","html_url":"https://github.com/substrate-system/blur-image","commit_stats":null,"previous_names":["bicycle-codes/image-element","bicycle-codes/blur-image","substrate-system/blur-image"],"tags_count":10,"template":false,"template_full_name":"nichoth/template-ts-browser","purl":"pkg:github/substrate-system/blur-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fblur-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fblur-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fblur-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fblur-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/blur-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fblur-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28752963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T17:14:41.098Z","updated_at":"2026-01-25T12:31:10.869Z","avatar_url":"https://github.com/substrate-system.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# blur image\n\n[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/blur-image/nodejs.yml?style=flat-square)](https://github.com/substrate-system/blur-image/actions/workflows/nodejs.yml)\n[![types](https://img.shields.io/npm/types/@substrate-system/blur-image?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/blur-image?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/blur-image)\n[![gzip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/blur-image?style=flat-square)](https://bundlephobia.com/package/@substrate-sustem/blur-image)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)\n[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)\n\n-----------------------------------------\n\nUse the [blur-up technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/)\nwith images, as a web component.\n\nThis depends on having some inline base64 code for a small, blurry image.\nSee [@bicycle-codes/stringify](https://github.com/bicycle-codes/stringify) for\nhelp with that.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [install](#install)\n- [demonstration](#demonstration)\n- [use](#use)\n  * [bundler](#bundler)\n  * [HTML](#html)\n- [develop](#develop)\n- [see also](#see-also)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## install\n\n```sh\nnpm i -S @susbtrate-system/blur-image\n```\n\n## demonstration\n\nSee a demonstration here: [substrate-system.github.io/blur-image](https://substrate-system.github.io/blur-image/).\n\n\u003e [!TIP]\n\u003e Throttle the internet speed with the dev tools.\n\n\u003cimg src=\"https://github.com/substrate-system/blur-image/raw/main/before.png\" width=\"200\" /\u003e \u003cimg src=\"https://github.com/substrate-system/blur-image/raw/main/after.png\" width=\"200\" /\u003e\n\n## use\nImport this module, then use the tag in your HTML. It should work with all\n[contemporary image attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images).\n\n### bundler\nJust import the module; it will call the global `customElements.define`\nfunction. Also, import the styles.\n\n```js\nimport '@substrate-system/blur-image'\nimport '@substrate-system/blur-image/css'\n```\n\nThen use the tag in your HTML:\n\n```html\n\u003cbody\u003e\n    \u003cblur-image\n        src=\"/100.jpg\"\n        placeholder=\"data:image/jpeg;base64,/9j/2wBDAAYEBQY...\"\n    \u003e\u003c/blur-image\u003e\n\u003c/body\u003e\n```\n\n### HTML\nThis package includes minified CSS and JS files, suitable for linking to directly from your HTML.\n\nFirst make sure the files are accessible by your web server:\n\n```sh\ncp ./node_modules/@bicycle-codes/blur-image/dist/index.min.js ./public/blur-image.js\ncp ./node_modules/@bicycle-codes/blur-image/dist/style.min.css ./public/blur-image.css\n```\n\nThen link to it in your HTML:\n\n```html\n\u003chead\u003e\n    \u003c!-- include the style --\u003e\n    \u003clink rel=\"stylesheet\" href=\"/blur-image.css\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cblur-image\n        src=\"/100.jpg\"\n        placeholder=\"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQY...\"\n    \u003e\u003c/blur-image\u003e\n\n    \u003c!-- include the JS --\u003e\n    \u003cscript src=\"./blur-image.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## develop\n\nStart a local dev server:\n\n```sh\nnpm start\n```\n\n## see also\n\n* [industrialempathy.com/image-optimizations](https://www.industrialempathy.com/posts/image-optimizations/)\n* [bholmes.dev/picture-perfect-image-optimization/](https://bholmes.dev/blog/picture-perfect-image-optimization/)\n* [css-tricks -- The “Blur Up” Technique for Loading Background Images](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/)\n* [css-tricks -- the `sizes` attribute](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/#aa-also-sizes)\n**tldr;** \"It’s actually not that bad to just leave it off. In that case, it assumes sizes='100vw'.\"\n* [cloudfour.com -- Don’t use `\u003cpicture\u003e` (most of the time)](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/)\n* [css-tricks -- Responsive Images: If you’re just changing resolutions, use srcset.](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fblur-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fblur-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fblur-image/lists"}