https://github.com/substrate-system/blur-image
Blur-up image component
https://github.com/substrate-system/blur-image
Last synced: 5 months ago
JSON representation
Blur-up image component
- Host: GitHub
- URL: https://github.com/substrate-system/blur-image
- Owner: substrate-system
- License: other
- Created: 2024-05-29T02:57:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-01T10:08:34.000Z (9 months ago)
- Last Synced: 2025-10-03T17:40:04.399Z (9 months ago)
- Language: HTML
- Homepage: https://substrate-system.github.io/blur-image/
- Size: 1.26 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# blur image
[](https://github.com/substrate-system/blur-image/actions/workflows/nodejs.yml)
[](README.md)
[](README.md)
[](https://packagephobia.com/result?p=@substrate-system/blur-image)
[](https://bundlephobia.com/package/@substrate-sustem/blur-image)
[](package.json)
[](https://semver.org/)
[](./CHANGELOG.md)
[](LICENSE)
-----------------------------------------
Use the [blur-up technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/)
with images, as a web component.
This depends on having some inline base64 code for a small, blurry image.
See [@bicycle-codes/stringify](https://github.com/bicycle-codes/stringify) for
help with that.
Contents
- [install](#install)
- [demonstration](#demonstration)
- [use](#use)
* [bundler](#bundler)
* [HTML](#html)
- [develop](#develop)
- [see also](#see-also)
## install
```sh
npm i -S @susbtrate-system/blur-image
```
## demonstration
See a demonstration here: [substrate-system.github.io/blur-image](https://substrate-system.github.io/blur-image/).
> [!TIP]
> Throttle the internet speed with the dev tools.
## use
Import this module, then use the tag in your HTML. It should work with all
[contemporary image attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images).
### bundler
Just import the module; it will call the global `customElements.define`
function. Also, import the styles.
```js
import '@substrate-system/blur-image'
import '@substrate-system/blur-image/css'
```
Then use the tag in your HTML:
```html
```
### HTML
This package includes minified CSS and JS files, suitable for linking to directly from your HTML.
First make sure the files are accessible by your web server:
```sh
cp ./node_modules/@bicycle-codes/blur-image/dist/index.min.js ./public/blur-image.js
cp ./node_modules/@bicycle-codes/blur-image/dist/style.min.css ./public/blur-image.css
```
Then link to it in your HTML:
```html
```
## develop
Start a local dev server:
```sh
npm start
```
## see also
* [industrialempathy.com/image-optimizations](https://www.industrialempathy.com/posts/image-optimizations/)
* [bholmes.dev/picture-perfect-image-optimization/](https://bholmes.dev/blog/picture-perfect-image-optimization/)
* [css-tricks -- The “Blur Up” Technique for Loading Background Images](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/)
* [css-tricks -- the `sizes` attribute](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/#aa-also-sizes)
**tldr;** "It’s actually not that bad to just leave it off. In that case, it assumes sizes='100vw'."
* [cloudfour.com -- Don’t use `` (most of the time)](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/)
* [css-tricks -- Responsive Images: If you’re just changing resolutions, use srcset.](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)