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.
npm i -S @bicycle-codes/blur-imageSee a demonstration here: substrate-system.github.io/blur-image.
Tip
Throttle the internet speed with the dev tools.
Import this module, then use the tag in your HTML. It should work with all contemporary image attributes.
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/css'Then use the tag in your HTML:
<body>
<blur-image
src="/100.jpg"
placeholder="data:image/jpeg;base64,/9j/2wBDAAYEBQY..."
></blur-image>
</body>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.cssThen 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>Start a local dev server:
npm start- 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.