Smart Responsive Image Delivery In JavaScript – SmartImages

Category: Image , Javascript , Recommended | March 14, 2017
Author:Paratron
Views Total:301 views
Official Page:Go to website
Last Update:March 14, 2017
License:MIT

Preview:

Smart Responsive Image Delivery In JavaScript – SmartImages

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
/>

 

You Might Be Interested In:


Leave a Reply