3

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.

michaellindahl
  • 2,012
  • 5
  • 36
  • 64
  • You don't load an image via interlacing, you just use an interlaced image. I know you can have interlaced png and gif but I'm not sure about jpeg. – Musa May 27 '12 at 05:56
  • How do I save an image as an interlaced image? In Pixelmator and Preview this option doesn't appear to be there. (I'm on a Mac). Thanks – michaellindahl May 28 '12 at 19:04
  • I know of GIMP and Photoshop, you can search online for others – Musa May 28 '12 at 22:48
  • Yea, I just found this: http://njarb.com/progressive-to-interlaced-results/ except Firefox doesn't load it interlaced, even though it does it for Facebook. Safari does, but mobile safari doesn't. Why is this? – michaellindahl May 28 '12 at 23:23

3 Answers3

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

marinbgd
  • 739
  • 13
  • 28
0

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">
michaellindahl
  • 2,012
  • 5
  • 36
  • 64
0

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.

michaellindahl
  • 2,012
  • 5
  • 36
  • 64
  • 1
    Please [edit] your answer and update it with new information rather than posting a new answer every time... – T J Oct 25 '14 at 17:04
  • 2
    @TJ disagree, he offered 2 distinct answers and an opportunity for the community to vote for each, which is handy. If he offers 2 solutions in one answer, one would never know which was voted on. – zupa Aug 23 '16 at 13:04