How does this image / photo loading technique work? (example included) [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

I just notice something interesting, and I hope I am not going crazy, but when you visit https://ghost.org/ it seems like their main photo banner (you will see it right away) loads in some sort of steps I guess, I can clearly see different phases being black and white, green, orange etc..

I also checked on several devices to make sure it wasn't my screen doing this and indeed it has this same behaviour every time. I honestly don't know what it is, tried looking into source code but can't find anything related.

Hopefully once you visit provided link, you will see it and can explain to me what it is and why it is done.

I assume they do this sort of loading with javascript perhaps?

(hard refresh page to see it happen again)

Answer 1

They do not do anything fancy, it's the background JPEG is compressed as Interlaced (Progressive) to allow the content to appear faster and go to more details as the images is being downloaded. More details here:

http://en.wikipedia.org/wiki/Interlace_(bitmaps)

or

http://en.wikipedia.org/wiki/JPEG#JPEG_compression

Enjoy!