SmartImages JavaScript library makes the images in your website smarter. It enables you to specify different source URLs for desktop and mobile devices and even distinguish between normal and retina displays.

SmartImages also provide a basic lazy loading functionality that helps reduce the impact of your website’s initial loading. This library has absolutely no dependencies and weighs around 1000 bytes if delivered with gzip compression.

[Animation] 3D Page Flip Images Effect For Vue component | flipbook

How to make use of it:

1. Place the minified of SmartImages.js in the HTML document.

<script src="smartImages.js"></script>

2. Specify the image sources at different breakpoints in the data attributes.

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

3. If you want 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
/>

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

Smart Responsive Image Delivery, SmartImages Plugin/Github

See Demo And Download

Official Website(Paratron): Click Here

This superior jQuery/javascript plugin is developed by Paratron. For extra advanced usage, please go to the official website.