A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.
For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.