Serving resized images on a responsive site without making 2x copies

new here. I'm sure this question has been asked numerous times, but here we go. I'm a blogger (not a coder) and recently started adjusting my responsive site for retina displays by uploading very big images. I'm aware of the existence of thumbnails and I'd like to, in order of importance:

1) force wordpress to display the_post_thumbnail('large'); for the images on my posts, or alternatively a js solution (I tried PB Responsive Images - which uses polyfill and SLIR - but had numerous issues: it worked only on some images, it violently compressed jpegs even at q95, changed the size of ALL images depending on media queries)

2) serve the original image only to the retina users, without creating useless 2x copies (like retina2x does) since I have limited space on my server

3) if possible, serve the_post_thumbnail('medium'); for users with smaller screens (or alternatively a js solution)

I'm pretty sure I can figure out a way to make all this work in the end but I wanted your opinion: what would be the simplest and easiest solution to lower the load on my follower's internet connection? There are 10k threads about it everybody has different opinions: by writing down my case hopefully I'll get more tailored advice.

Thanks for your consideration :) Rose