https://github.com/verlok/img_srcset_lazyload
This is an example of lazy image loading with responsive images (using srcset and sizes on the img tag) and progressive JPEG image format. Best practices about web performance implemented using my LazyLoad.
https://github.com/verlok/img_srcset_lazyload
Last synced: 3 months ago
JSON representation
This is an example of lazy image loading with responsive images (using srcset and sizes on the img tag) and progressive JPEG image format. Best practices about web performance implemented using my LazyLoad.
- Host: GitHub
- URL: https://github.com/verlok/img_srcset_lazyload
- Owner: verlok
- Created: 2015-04-17T21:14:22.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-09-17T15:11:09.000Z (about 10 years ago)
- Last Synced: 2025-03-18T12:55:28.603Z (7 months ago)
- Language: HTML
- Size: 3.36 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# LazyLoad and responsive images
This is an example of **lazy image loading** with **responsive images** and **progressive JPEG** image format.
These best practices about **web performance** were implemented using [LazyLoad](http://verlok.github.io/lazyload/) by [Andrea Verlicchi](http://www.andreaverlicchi.eu).
[**SEE ONLINE DEMO**](http://verlok.github.io/img_srcset_lazyload/)
## Responsive Images
Responsive images are implemented using the `img` tag with the `srcset` and `sizes` attributes, and [picturefill](https://github.com/scottjehl/picturefill) as polyfill for older browsers.
## LazyLoad
Images are loaded only as they enter the viewport through the usage of my [LazyLoad](http://verlok.github.io/lazyload/) script, which supports the `srcset` attribute in addition to the good old `src` attribute.
## Progressive JPEG rendering
Progressive JPEG rendering is guaranteed through the usage of the `show_while_loading` option of my [LazyLoad](http://verlok.github.io/lazyload/) script.