Progressive Image Rendering

A presentation at JSDayES 2017 in in Madrid, Spain by José M. Pérez

On a regular web page, images represent the largest assets. We might have heard about responsive images to serve the most suitable image for each screen. However, how and when we load them can have a great impact too.

I will show you several techniques used by well known websites, based on placeholders, dominant colours, blurry images and lazy loading to improve user's perceived performance.

These techniques leverage several web technologies like CSS3, canvas and the recent IntersectionObserver API.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.