Dynamically reassemble a picture in JavaScript

I notice lately that in some websites (I think https://wired.com does it) the image first load really fast. It always s开发者_开发技巧tarts blurred and get better and finally you have a really hi-resolution picture which is really tiny in size.

My questions are:

1. What is going on?
2. How do I incorporate it into my work?

I was thinking it has to be JavaScript doing something to some raw image data sent asynchronously.

It's called "interlacing" and is a feature of JPG and PNG file formats. GIF also supports it, albeit not so well.

It really depends on how you save your images. Most decent image editors will have a checkbox which allows you to specify whether to produce interlaced or non-interlaced images. Some (like Photoshop) even allow you to specify how many passes to do for a JPG file.

The idea behind the feature is exactly this - so that you would get a picture over the wire as fast as possible. It would be blurry at first, but you would at least have something. The finer details would come later.

Interlaced pictures are a little bit larger than non-interlaced pictures with the same content.

Added: In laymans terms, think of it like this - instead of one picture, the JPG file will contain three - small one, medium, and full size. At first the small one is downloaded and then displayed really stretched. Then the medium one gives more details (but is still stretched), and finally the full picture arrives. There can be more than 3 pictures as well.

That's just a progressive JPEG or PNG image -- any decent image editor can save out in this format.

This is called an "interlaced" gif, or "progressive" jpeg. It's the way the image file is saved - the image uses a bit more space, but it start loading really fast.

You can use your image editor to save your image this way. With imagemagick, do

convert -interlace PLANE input.jpg output.jpg

Check the options when you save a JPEG file in your image editor (Photoshop, GIMP, etc). There should be an option for "interlaced" or "progressive" format.

Wikipedia explains it well, as usual.