In everyday use of internet, i notice that most times, any image that loads, loads by "growing" itself vertically, from top to bottom,. that is, you first see only a few rows of pixels, and it increments until it is full height. I.e, the way an image would print in a physical printer.
But other times, the images loads full-size, that is by using all their width and height, but they load at very low resolution, they look very pixelated and blurry, then they have "swipes" that improve the resolution a bit each step. After a few "swipes" it gets the max resolution of the image. (I don't know if resolution is the proper term, but i hope you get the idea)
So, why or when does each happen? what are the conditions? On what it depends? I have no idea of web protocols, transfers, data-encoding or any of that, so please give an easy to understand answer for a non expert (a regular internet user).