lazysizes progressive extension
This plugin optimizes perceived performance by adding better support for rendering progressive JPGs/PNGs in conjunction with the LQIP pattern.
How it works
By default, browsers don’t render images progressively when switching from one image to another (e.g. changing the
src or adding
When lazysizes detects the image gets visible, this plugin will remove the
src attribute and insert it as a background image until the image from
srcset is completely loaded.
So when using the LQIP pattern, the low quality placeholder will stay visible and the high quality image will render progressively on top of it.
This looks especially nice for large images on slow connections.
- Use LQIP pattern
- Make sure your JPGs/PNGs are saved with the progressive/interlaced option: Online Progressive JPEG checker
All browsers with native
srcset support. Successfully tested on
- Chrome for Android
- Native Android Browser 4.4
Actually it works great in Firefox too, but currently Firefox shows an annoying broken image icon for a few seconds after removing the
src attribute. To prevent that, the plugin is disabled for browsers without native
srcset support. Hopefully this issue will be gone when Firefox gets native