Security News
Crates.io Users Targeted by Phishing Emails
The Rust Security Response WG is warning of phishing emails from rustfoundation.dev targeting crates.io users.
By Sarah Gooding - Sep 12, 2025
@bicycle-codes/blur-image
Advanced tools
blur image
Use the blur-up technique with images, as a web component.
This depends on having some inline base64 code for a small, blurry image. See @bicycle-codes/stringify for help with that.
install
npm i -S @bicycle-codes/blur-image
demonstration
See a demonstration here: 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.
bundler
Just import the module; it will call the global customElements.define
function. Also, import the styles.
import '@bicycle-codes/blur-image'
import '@bicycle-codes/blur-image/style.css'
Then use the tag in your HTML:
<body>
<blur-image
src="/100.jpg"
placeholder="data:image/jpeg;base64,/9j/2wBDAAYEBQY..."
></blur-image>
</body>
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:
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:
<head>
<!-- include the style -->
<link rel="stylesheet" href="/blur-image.css">
</head>
<body>
<blur-image
src="/100.jpg"
placeholder="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQY..."
></blur-image>
<!-- include the JS -->
<script src="./blur-image.js"></script>
</body>
develop
Start a local dev server:
npm start
see also
- industrialempathy.com/image-optimizations
- bholmes.dev/picture-perfect-image-optimization/
- css-tricks -- The “Blur Up” Technique for Loading Background Images
- css-tricks -- the
sizesattribute tldr; = "It’s actually not that bad to just leave it off. In that case, it assumes sizes='100vw'." - cloudfour.com -- Don’t use
<picture>(most of the time) - css-tricks -- Responsive Images: If you’re just changing resolutions, use srcset.
FAQs
A webcomponent that uses the 'blur up' technique
We found that @bicycle-codes/blur-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 18 Jul 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Introducing Custom Pull Request Alert Comment Headers
Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-and-forth.
By André Staltz - Sep 12, 2025
Product
Rust Support Now in Beta
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
By Mikola Lysenko, Trevor Norris - Sep 11, 2025