There are several approaches to achieve this.
There is an attribute of
IMG
tag called
lowsrc
. It was meant to be loaded first, than replaced by the image in the
src
attribute. Unfortunately, modern browsers are ignoring it; still you can make it work with javascript, see:
http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx[
^];
An other approach is even better: the full-res images are loaded only when the image is scrolled in the viewport:
http://www.appelsiini.net/projects/lazyload[
^]
You can also rely on jpg itself:
http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/[
^], but the support is not the same across browsers.