Loading Appropriate Image Source For Responsive Website – RIMG

Preview:

Description:

RIMG is a javascript library for responsive image that makes use of media queries to determine the appropriate image source and update accordingly when the window’s size reaches the break point. Works with all modern browsers and even Internet Explorer 8/9. Helpful for optimizing images on your web page to reduce the load time and save the bandwidth.

Basic Usage:

Add the following Html snippet in the head section of your page.

<meta name="viewport" content="width=device-width, initial-scale=1">

Include RIMG.js script in the page.

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

Set the breakpoints in the javascript.

<script>
var RimgBreakpoint = '-tiny 320w 1x, -tiny-retina 320w 2x, -small 480w 1x, -small-retina 480w 2x, -medium 600w 1x, -medium-retina 600w 2x, -regular 768w 1x, -regular-retina 768w 2x, -large 1024w 1x, -large-retina 1024w 2x, -huge w 1x';
</script>

Insert an img tag with the data-src attribute to specify the image source.

<img data-src="images/image.jpg"/>