<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; } });