I'm not the best at image sizing but heres my "rules" when used in css:

• use different versions for different screens type. I always have a 1x version for basic screen and a 2x version for high-dpi screen

• use different versions for different screens size. mobile, tablette, laptop, big monitor if needed. Of course this is not needed if the size of the image is the same for all device, but if you use a full width image for example, you'd want to adapt it.

So if i have a 1200x1200 px (rendered size) image, i'd load with media query: ± 600x600 for mobile, ± 1200x1200 for highDPI mobile and desktop, and ± 2400x2400 for highDPI desktop. (and maybe one or two for tablette in-between)

PS: you can target highDPI screen with @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2){}