https://github.com/krutsch/progressive-picture
Native Lazy Loaded Picture Element with Progressive Image Change
https://github.com/krutsch/progressive-picture
dom element image intersectionobserver lazyload mutationobserver picture pictures progressive progressive-image-loading
Last synced: about 2 months ago
JSON representation
Native Lazy Loaded Picture Element with Progressive Image Change
- Host: GitHub
- URL: https://github.com/krutsch/progressive-picture
- Owner: Krutsch
- License: mit
- Created: 2020-06-27T11:14:21.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-16T16:03:32.000Z (2 months ago)
- Last Synced: 2025-05-08T21:56:18.010Z (about 2 months ago)
- Topics: dom, element, image, intersectionobserver, lazyload, mutationobserver, picture, pictures, progressive, progressive-image-loading
- Language: TypeScript
- Homepage:
- Size: 166 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Progressive Picture
> This 700 bytes (compressed) library enhances `Picture Elements` with Progressive Image Loading and thus improves the initial time of images being displayed.
> You can find out more from the [blog post](https://dev.to/fabkrut/enhancing-images-on-the-web-3b35).
## Install via NPM
```
$ npm install progressive-picture
```
## Install via Script Tag
```
```
## Add the styles
```css
picture > img {
display: block;
max-width: 100%;
height: auto;
filter: blur(0);
transition: filter 0.7s ease-in;
}
picture > img[data-src] {
filter: blur(3px);
}
picture > img.img-progressive {
width: auto;
}
```
## Example
```html
```
### Demo
https://lazy-load-picture.netlify.app/
https://lazy-load-picture.netlify.app/masonry.html
## Usage
The `srcset` of `` and the `src` of `![]()
` has to be filled with the URI for the low-quality image (or in case of the `` element: a `srcset` of low quality preview pictures. The data-src holds the high-quality image(s) and will be replaced once it has been loaded.
Also, there is a data-alt Attribute that can be applied as alt, once the Image was replaced. This fixes the inelegance of displaying text before an image appears.
### Further Optimization
While this library is useful on the Web, optimizing the image correctly in the build step is the other side of the coin. This plugin [snowpack-plugin-sharp](https://www.npmjs.com/package/snowpack-plugin-sharp) could be helpful in this case.