For an in depth look into srcset and responsive images, the MDN web doc "Responsive Images" is a great resource. And there are several other articles out there just a short search away.
Using x-descriptors makes it convenient to serve images at consistent physical sizes on screens of different screen resolutions.
For example, if you have a 900 pixel wide photo loading on a standard screen, you will want a 1350px wide photo loading on a 1.5x screen, 1800px wide on 2x etc, in order for them to look physically the same to the viewer.
The code will look something like this:
<img srcset="my-image-900w.jpg,
my-image-1350w.jpg 1.5x,
my-image-1800w.jpg 2x"
src="my-image-900w.jpg" alt="how would you describe it?">
If I had a device with a 2x pixel density screen, it would load only my-image-1800w.jpg and ignore the others.
For deciding what widths to choose I would match the css media-queries. Then so long as you have an option for small screens (say 300w) you should be all set. Personally I use boostrap as a framework, so I use the same widths to load my responsive images, plus a portfolio size for screens larger than 2000 pixels.
Hope this helps!