: Why sometimes images load top-bottom, and sometimes by "enhancing" resolution? In everyday use of internet, i notice that most times, any image that loads, loads by "growing" itself vertically,

@Sims2060225

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.

Vote Up Vote Down