January 04, 2020

How to use SVG as a Placeholder, and Other Image Loading Techniques →

performance
responsive images
lazy loading
lqip
squip
svg
primitive.js

[There are many] different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it's highly compressible and easy to manipulate with CSS and JS.