🎤 Progressive Image Rendering
- 👤 José M. Pérez
- Twitter: @jmperezperez
- Web: https://jmperezperez.com/
📹
Video:
https://youtu.be/S70xyRYCNdY
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.
This page was generated from this YAML file. Found a typo, want to add some data? Just edit it on GitHub.