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.
José Manuel Pérez Pérez
José is a web developer at Spotify, where he works building Spotify’s web player. He likes web performance optimisation and making sites load (and look) faster.