Author: | Paratron |
---|---|
Views Total: | 301 views |
Official Page: | Go to website |
Last Update: | March 14, 2017 |
License: | MIT |
Preview:

Description:
SmartImages is a tiny, retina-ready, standalone JavaScript library for smart image delivery that has the ability to dynamically load and display images according to the screen width. Supports desktop, mobile and retina devices.
How to use it:
Place the minified version of the SmartImages.js in the html document.
<script src="smartImages.js"></script>
Specify the image sources at different breakpoints in the data attributes as shown below:
<img data-src="desktop.png" data-size="980x400" data-src-mobile="mobile.png" data-size-mobile="320x150" data-src-mobile-2x="mobile-2x.png" data-size-mobile-2x="640x300" data-src-custom="custom.png" data-size-custom="750x400" data-match-custom="(min-width: 640px) and (max-width: 750px)" />
If you’d like to lazy load the image, just add the ‘data-lazy’ attribute to your img tag.
<img data-src="desktop.png" data-size="980x400" data-src-mobile="mobile.png" data-size-mobile="320x150" data-src-mobile-2x="mobile-2x.png" data-size-mobile-2x="640x300" data-src-custom="custom.png" data-size-custom="750x400" data-match-custom="(min-width: 640px) and (max-width: 750px)" data-lazy />
The library also supports background images:
<img data-smartImageContainer data-src="desktop.png" data-size="980x400" data-src-mobile="mobile.png" data-size-mobile="320x150" data-src-mobile-2x="mobile-2x.png" data-size-mobile-2x="640x300" data-src-custom="custom.png" data-size-custom="750x400" data-match-custom="(min-width: 640px) and (max-width: 750px)" data-lazy />