How does Apple.com achieve their progressive jpeg loading?

Question

If you take a look at sites like this one

http://www.apple.com/watch/overview/

you'll see that their .jpgs load unconventionally, starting with a pixelated version and slowly increasing in resolution instead of loading from top to bottom.

In inspector, the images don't look special to me. Is this a certain way of indexing the file itself so the browser receives data in this specific order?

Answer 1

This sounds like a Progressive Jpeg format which according to Wikipedia:

There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, support for progressive JPEGs is not universal. When progressive JPEGs are received by programs that do not support them (such as versions of Internet Explorer before Windows 7)[13] the software displays the image only after it has been completely downloaded.

This has nothing to do with Javascript, HTML or CSS, but is more a product of the file types used.

Answer 2

I've seen this effect on other websites as well. This depends on the image type you are saving it as. According to Wikipedia:

Interlacing (also known as interleaving) is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image. When communicating over a slow communications link, this is often preferable to seeing a perfectly clear copy of one part of the image, as it helps the viewer decide more quickly whether to abort or continue the transmission.

This is known as interlacing for PNG and GIF type images, and a progressive format for JPEG images.

There is an option in the Save for Web... section in Photoshop:

Notice the Progressive checkbox.