Handling Responsive Images With Img Srcset

I'm using angular with material and using img srcset to handle responsive image for header. This is what I'm doing so far:

The code will look something like this:

<imgsrcset="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!