Load an image via Interlacing - From low to full resolution - HTML

Question

I am creating a site that uses an image as the background. I hate having the image load from top to bottom as it just makes the page look bad as it is loading. I have seen some sites that load a really low resolution image and then it gradually moves up to the full resolution photo. I would like my site to do the same but I don't know how to implement this. Does this requires multiple image files and more bandwidth? I would like it to use the same bandwidth/take the same amount of time as the traditional way does.

Answer 1

Another option is to use an online image converter as interlaced is the type of file that was saved. Here is one I found: http://njarb.com/2011/08/progressive-and-interlaced-images/ But in Firefox it looks like it doesn't load it interlaced but instead it waits till its fully loaded.

Answer 2

For .JPG, save file as "Progressive JPEG" and that's it. Progressive .jpegs when downloading, show at full size but blurry until fully downloaded.

Almost every picture viewer can save jpg as progressive. I recommend IrfanView because of simplicity, powerful batch, freeware...

Answer 3

One option I found, add a low resolution source. I don't know if this is supported by all the current browsers or if it is outdated...

<img src="../graphics/bearico1.gif" lowsrc="URL">