The browser picks whichever image best fits the context, including display pixel density and images it has already downloaded. If it has the largest image cached and no others, it might show the largest image and not bother to download the others. The exact behavior is unspecified.
Regarding Hugo specifically, Hugo can resize images, so if you give it a 3x image, you can write code to have it generate 2x, 1x, whatever-x versions as you like. I recently added this functionality to a shortcode myself.
In all my tests, only the second link appears in the source code despite srcset=“image-md_1x.webp 1x, image-md_2x.webp 2x” with this being generated via image processing (Do math functions take decimals? - #8 by jmooring). I am starting to question if Hugo really supports Retina Images.
What does full quality resized images mean though?
If you want an iPad to have 2x retina images, you need approx 2000px wide images (for full screen width, depending on model and margins).
So serving an image that large for non retina desktops and phones will likely be using a file four times bigger or more than really required.
It is a problem worth solving.
If you want more control than srcset sizes the picture element allows sources to specify two media queries e.g. (large and retina screen): media="(min-width: 1023px) and (-webkit-min-device-pixel-ratio: 1.9)"
Also useful is that you can usually reuse certain images also like a desktop 1000px wide image doubles up for a 360@x3 / 1080px wide phone screen.
I have pretty complex image processing on my hugo site, to do things like collaging three images together it does the maths to work out how big each needs to be and provides retina versions.