Minimal CSS-only blurry image placeholders

Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed! The custom property above gives you this image: Try changing the property’s value (WARNING: FLASHING) Granted, it’s a very blurry placeholder especially in contrast to other leading solutions. But the point is that it’s minimal and non-invasive! No need for wrapper elements or attributes with long strings of data, or JavaScript at all. Note for RSS readers / ‘Reader’ mode clients: This post makes heavy use of CSS-based images. Your client may not support it. Example images Survey of LQIP approaches There have been many different techniques to implement LQIPs (low quality image placeholders), such as a very low resolution WebP or JPEG (beheaded JPEGs even), optimised SVG shape placements (SQIP), and directly applying a discrete cosine transform (BlurHash). Don’t forget good old progressive JPEGs and int ... Read full article.