How to calculate the pixel dimensions needed for an image asset (optimisation)

In researching how to best optimise images, I have repeatedly come across the advice that one should only use images as big as they appear on the site, or 2x the pixel dimensions for high resolution screens.

However I am struggling to implement this advice;

Firstly I imagine I should try and save my image at the size that it will appear on the largest viewport, is that correct?
Then srcset would take care of the smaller variants.

When designing responsively, and setting all of my properties in % or VW/VH, how can I pinpoint the pixel dimensions I need when processing my image?

Do I have to guesstimate what device most of my users will be using and optimise for that?

And how does HiDPI enter into that? Do I have control over HiDPI with CMS images?

I apologise if answers to these questions are either obvious or have been covered before, but after a long search I still could not find anything on this.
Any links to other topics or external resources would be greatly appreciated.

Thank you in advance!