Why sometimes images load top-bottom, and sometimes by "enhancing" resolution?

Question

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).

Answer 1

This is because some image formats, such as PNG, JPEG and GIF can be saved in an interlaced/progressive form which allows the full image to be roughly rendered immediately, with an increasing level of detail added as more and more file data is received. This contrasts with the "baseline" format, which arranges the image data in a top-to-bottom fashion, which means the browser has no way to render the bottom portion of the image for which it's received absolutely no data on.

Progressive/interlaced encoding was more popular prior to the widespread adoption of broadband, as downloading times for images was much more significant back then, and with bandwidth scarce, it was nice for users to get a preview of the image before they decide whether they want to download the entire thing.

Not all browsers support progressive rendering of all interlaced formats, however. So even though you might save an image in interlaced form, a browser could still end up waiting for the entire image to download before showing the user anything at all. Most webmasters seem to favor baseline formats since interlaced/progressive encoding adds about 10~20% to the overall file size, and most images load so fast these days that progressive rendering isn't too noticeable except on large files.

Edit: As w3d pointed out, my initial statement was incorrect about JPEGs being larger when saved in progressive format. It seems you actually get a slight decrease in file size using progressive encoding.