Serving images at correct size

Hi
What is the best technique to upload an image to a page builder container and make it show in 1:1 pixel quality on standard displays and also displays and mobile devices that has got smaller / bigger displays with various kinds of high pixel density screens?

Right now if I for example have got 3 columns in my page builder layout, I can upload image 1,2 and 3 in about 300px width or so and check in a browser developer tool exactly what width it needs and then upload a new image resized in my local image editor in the exact size my page layout uses in this case.
Ok so now it looks good on my 27″ desktop screen with 1:1 pixel density. But when I move my browser over to my 2:nd display with retina screen the same image is blurry after a page refresh in the browser.
The only solution is to upload a bigger image than the page builder container needs. The image will look crisper on retina displays but will be too big for 1:1 pixel visitors causing many visitors to get slow page load because the browser needs to resize down the images.

Ideas on improving this?