Image dimension controlls, and How Srcset works on Images

Image Dimension Controlls
I wanted to know what the dimension controls are on image elements, there is this icon with what looks like an eye and arrows on the corners (highlighted with yellow) that I can’t seem to figure out what its for and is not mentioned in the docs anywhere. Also what is the W and H fields (highlighted with green) for since they can’t be edited?

Image Controls

Srcset
Lastly what is the Attachment Srcset toggle and how do I use it. The tooltip says “If using an Attachment ID, this will use scrset based on your configured image sizes”. I looks like Srcset should let me grab a different size or version of an image, but how does this work with WP and Cornerstone? Like how do I configure the image sizes?

For example I have an ACF image field used for box art on a board game post type. On a listing page I want to use a smaller thumbnail of that image (not the full size) in a looper as its never going to be displayed larger than say 100px and having the full sized image will majorly slow down the page load as there will be lots of items for the looper to display. Is this a case for Srcset? And if not how do I choose a thumbnail version of an image rather than the full sized image when choosing an image is Cornerstone?