Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer

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.

share|improve this answer
2  
Interlaced/progressive encoding does not necessarily create a larger file in my experience. It appears to depend on the image type (PNG, JPEG, GIF). Yes, interlaced PNGs could be 10-20% larger. However, progressive JPEGs are always marginally smaller(!) and non-interlaced/interlaced GIFs are always the same size. At least this is what I see from the PNG, JPEG and GIF optimizers in "Paint Shop Pro". –  w3d Jan 18 '13 at 23:27
    
It seems you're right about JPEG. It seems to vary from image to image, but with 3 or 4 scans in Photoshop, both the images I tested were smaller than the optimized baseline. Though the file size does seem to increase the more scans are used. With 5 scans, one image was slightly larger than the baseline and the other was slightly smaller. However, both images grew when interlaced in GIF: 55kb versus 48kb, and 313kb versus 290kb. –  Lèse majesté Jan 18 '13 at 23:50
    
WHOA! I'm surprised the answer was more related to the images themselves than to browsers or transfer protocols or something. Do you by any chance have examples of a site with a same image in both formats? to compare loading side by side. Or how could I try it? How could I test it locally? I'm guessing that if I use local images, they will just load almost instantly, so I'd need to upload them to some image saving site... Anyway, THANKS for the answer. It was very thorough. –  DiegoDD Jan 19 '13 at 0:09
    
@DiegoDD: Most professional image editors (Gimp is a free one) should allow you to choose whether to save in baseline or progressive/interlaced format. You might still be able to test them on a local network if you make the image large enough, especially using a slower wifi connection. –  Lèse majesté Jan 19 '13 at 2:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.