Before we go and look to the images I provide you with a bit of information on the screen and settings fo the browser you are using now:
Fixed width image: img with srcset
This HTML5 code picks a fixed image. But the resolution might vary based on the settings and capabilities of the screen. This setting is called Device Picture Ratio and here is the outcome for your specific screen and setting:
Specifying density with x
It depends on the sort of screen. When the screen has a high definition it will display the image with the 2x indication. So with use an increased resolution of the image to create a higher density. The image is displayed at half the pixel size.
So in this example of 2x times the default the browser will choose the 1000 px image and display it with width 500px.
The image below works with the settings of your browser and will display the width of the image it selected:
<img srcset=" 4000-pixels.jpg 4x, 2000-pixels.jpg 3x, 1000-pixels.jpg 2x, 500-pixels.jpg 1x " src="default.jpg" >
Specifying width w
The other way to inform the browser about the different sizes is to actually specify the image width in pixels with 'sizes'. From this value the browse calculates the prefered source image.
<img srcset=" 4000-pixels.jpg 4000w, 2000-pixels.jpg 2000w, 1000-pixels.jpg 1000w, 500-pixels.jpg 500w" src=default.jpg sizes = 500px>