How to implement jpeg progressive image on web?

Question

I am working on website( winni.in ), Which is based on Java, Html, Javascript. I want to implement render progressive image on page load. But i don't know much more idea about it. I have seen and read these links:

http://pooyak.com/p/progjpeg/

https://blog.codinghorror.com/progressive-image-rendering/

http://pooyak.com/p/progjpeg/

https://jmperezperez.com/medium-image-progressive-loading-placeholder/

I have read above links but i did not get how to implements progressive image concept. I am a front end developer, It is possible from front-end or back-end. I don't know. This concept also using by facebook.

Answer 1

You have to save/convert images as progressive images , you cas use photoshop or any other images processor for this, you need to check :'interlaced' and 'progressive' check box while saving image. Note: saving images as progressive may increase images size around 10%-20% .