JavaScript Library To Change Image Source Based On Viewport Size – Dynamic Image

Preview:

Description:

Dynamic Image is a lightweight JavaScript library that dynamically swaps out the source of the image based on the viewport size. Great for responsive web layout to reduce the page load time and save the server bandwidth.

How to use it:

Include the dynamicImage.min.js in the web page.

<script src="dynamicImage.min.js"></script>

Add an image with empty ‘src’ attribute into the web page.

<img id="aPhoto" src="" style="width:100%" >

Enable the Dynamic Image and define an array of images for different screen sizes.

var myImage = new DynamicImage("aPhoto");
myImage.setWidthAlternatives(
  [100,150,200,300,500,750,1000,1500,2000,3008],
  ["100.jpg",
  "150.jpg",
  "200.jpg",
  "300.jpg",
  "500.jpg",
  "750.jpg",
  "1000.jpg",
  "1500.jpg",
  "2000.jpg",
  "original.jpg"]);
 window.onresize = myImage.delayedUpdate;