Minimal CSS-only blurry image placeholders

Summary

Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed! <img src="…" style="--lqip:192900"> 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 Toggle images Check out the LQIP gallery for examples! 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 interlaced PNGs! Canva and Pinterest use solid colour placeholders. At the other end of the spectrum, we have low tech solutions such as a simple solid fill of the image’s average colour. Pure inline CSS solutions have the advantage rendering immediately — even a background-image: url(…a data URL) would be fine! Gradify generates linear-gradients that very roughly approximate the full image. The big disadvantage of pure CSS approaches is that you typically litter your markup with lengthy inline styles or obnoxious data URLs. My handcoded site with no build step would be extra incompatible with this approach! <!-- typical gradify css --> <img width="200" height="150" style=" background: linear-gradient(45deg, #f4a261, transparent), linear-gradient(-45deg, #e76f51, transparent), linear-gradient(90deg, #8ab17d, transparent), linear-gradient(0deg, #d62828, #023047); "> BlurHash is a solution that minimises markup by compressing image data into ...