Minimal CSS-only blurry image placeholders, https://leanrada.com/notes/css-only-lqip/.

Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.

#lqip #css

#Development #Explorations
The ultimate low-quality image placeholder technique · A cutting-edge remake of a decade-old technique https://ilo.im/15ad6i

_____
#WebPerf #WebDev #Frontend #Images #Placeholders #WebVitals #LQIP #LCP