I recently came in contact with another web designer/developer and he asked me if I could develop a jQuery slideshow/gallery plugin like Flexslider but with a way to choose which image to display, dependent on the browsers width.
Enter ImgReplacer. An ultra simple, lightweight and easy to use jQuery plugin to choose which image should be displayed depending on the browser's width. That way, you can serve a small image for mobile users and avoid the use of extra bandwidth, etc.
ImgReplacer is based on the simplest breakpoint selection for responsive web design. Under 480px, under 767 and above 768. As simple as it gets.
You can check out how it works, on its GitHub page
For each image you have, you need to have 3 separate versions. One for under 480px width, one with 767px width and one for higher resolutions (your choice of maximum width). Then create a div with like the one below.
Finally call ImgReplacer, in a document.ready() fashion, on the divs you want replaced with images.
And depending on the browser's (viewport) width, the script will generate the image it should.
If you need any help with it, do not hesitate to ask.