With this free plugin, you can load images when they appear in view and reduce your total page size.
This way the entire page can load first with small placeholders for images. Then your visitors browse naturally without waiting for every asset to load — always a good thing from the user’s perspective!
AntiModerate pulls image dimensions and forces all img tags into a fixed size on the page. These pre-loaded images are pushed through StackBlur.js which drastically reduces the total preview file size, thus loading the page a whole lot sooner.
Once these smaller images are in place then AntiModerate loads the full-size images in the background. Each blurry photo is then replaced with the regular photo once it’s finished downloading. Easy!
This saves a bunch of time waiting for images and it helps your page load much quicker. It’s a huge benefit to users since they can start consuming content sooner, and it benefits your SERP rankings since Google cares a lot about page speed.
You can install the library directly with npm or Bower, or by pulling the script through GitHub.
With only a few lines of code, AntiModerate should be a no-brainer to get running on any page.
The post Make Better Progressive Images Loading with AntiModerate appeared first on Hongkiat.