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 som

Answer 1

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 2

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">

Answer 3

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.