jQuery Fetch Responsive Image plugin

Demo 1: list of widths

<img class="my-image" data-widths="320,480,640,800,960,1120" />

Parameter widths is essentially a list of breakpoints for that image. At each window size change, the nearest upper breakpoint size is taken as "desired width" and sent to the webserver.

This demo uses a list of locally stored images. A Javascript function uses the received width to get the image url:

var IMAGE_URL = "img/orion-{width}.jpg";

$.responsive({
    urlSource: function(data) {
        var width = data.width;
        var url = IMAGE_URL.replace("{width}", width);
        return url;
    }
});