WordPress resizing of images

I noticed when loading pages and post that any images shows up as a much smaller file size (20-60kb)than the actual file (600-800kb). However, when one double click on the images, it opens up the actual file, which is much larger.

My questions is, when the pages are being loaded on the browser, does it pull 20-60kb small images or does it actually pull the actual file size of 600-800kb. I am trying to determine the size of photo I should be using on my blog as I am concern about load time for slower devices/connections. If the real impact is 20-60kb per images (even when the file size is 600+), then my concern is not an issue. However, if the real impact is 600-800kb actual file size, then I would have to further compress the file and degrade the quality of the images.

An example is this page https://www.escapetraveler.com/blog/2012/03/25/overcast-in-kaula-lumpur/

If you right mouse click on this small image and save it down, the size is only 10KB.

If you double click on the image and have it open the fullsize in a different tab, then download the image, the size is 700kb+.

So when a browser load a page, does it read 10kb or 700kb?