0

I like the way the images are preloaded on the website of the guardin, for instance in this case : http://www.theguardian.com/artanddesign/gallery/2014/dec/08/photographer-of-the-year-2014-shortlist

They are first of all blurred/pixelized and then loaded. I would like to apply something like this for a website I'm actually doing, which has quite heavy images. All my images are already placed on the website.

Any idea of how is this made ? Any plugin maybe ?

Thanks a lot !

guillaumeb
  • 11
  • 5
  • 1
    You're looking for Progressive Images. Here is something to get you started: http://peteschuster.com/2013/01/saving-jpegs-for-the-web-setting-photoshop-up-for-progressive-jpegs/ – GVashist Dec 08 '14 at 21:31
  • "progressive jpeg" might be easier to google... But yeah, @GVashist is right. – brbcoding Dec 08 '14 at 21:35

1 Answers1

0

As you can see in the html source, each li element contains two images: a low-res and a high-res one. The low-res image is visible, because it loads faster. When the high-res image is loaded, it's display property is set to 'none', and the high-res image is shown.

I think some sort of lazyload plugin would do the trick.

Jakub Bilko
  • 111
  • 3