SlothImage is a lightweight javascript library which is developed to help developers serve two major purposes:
- Image Lazy Load: Lazy Loading of Images to improve pagespeed aka First contentful paint.
- Optimize Images: Display Images as per device resolution which means mobile devices will ONLY render mobile images and vice versa.
SlothImage will enable developers to have extremely light-weight pages which inturn improve SEO of the website.
Node.js use to run the application and manages application's dependencies using npm. It also serves as the run-time environment.
ECMAScript is required to run the code.
In order to lazy load images ONLY, define images using img tags and place your image url inside data-src attribute and NOT inside src
<img data-src="url-to-image" src="" />
You can define src attribute above with a low resolution image to give your page a nice look and feel.
The easiest way to use SlothImage is to include the script:
<script src="slothImage.min.js"></script>
<script>
slothInit({});
</script>
That's it!
In order to lazy load images and optimize them based on resolutions (mobile and desktop), define your images using img tags and place your image url inside data-src attribute and NOT inside src.
Define both desktop and mobile version of your images using selector classes:
<img src="" class="_desktop-view" data-src="url-to-high-resolution-desktop-image" />
<img src="" class="_mobile-view" data-src="url-to-low-resolution-mobile-image" />
In the above example, you can define your images with different versions for both desktop and mobile and SlothImage will render it based on resolutions.
In order to lazy load images and optimize them based on resolutions, you need to define a breakpoint, desktop and mobile selectors in your javascript code:
<script>
slothInit({
break_point: 767, // breakpoint between desktop and mobile resolution
selector_desktop: '_desktop-view',
selector_mobile: '_mobile-view',
threshold: 300 // threshold is the amount of space which is outside the viewport
});
</script>
SlothImage is a free lightweight library that will help users lazy load images across the entire website and also optimize images across different resolutions e.g. mobile and desktop.
You can download the project from the below options available:
- Download SlothImage
- Clone the repo:
https://github.com/alimansoor/slothImage.git - Install with npm:
npm install
- Include more resolutions - desktop, tablet, mobile
- Include Units - em, rem, pt, px
We use SemVer for versioning. For the versions available, see the tags on this repository.
Muhammad Ali Mansoor
This project is licensed under the MIT License - see the LICENSE.md file for details
- OMCSS https://www.npmjs.com/package/omcss
- MetaWeather https://www.metaweather.com/