Smart Responsive Image Delivery In JavaScript – SmartImages

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