Blurry Image Placeholders, Generated With Minimal CSS
1 min read
Summary
Low-quality image placeholders (LQIPs) are an important part of web design, but creating them effectively isn’t always easy.
While many solutions are available, they often rely on JavaScript or lengthy code, which can clutter HTML.
Lean Randahl has created a method for creating LQIPs using only CSS code, packing all the necessary data into a single CSS integer that is decoded directly in CSS to create an image.
This method avoids the need for additional wrappers or lengthy data strings and doesn’t require JavaScript.
Randahl also created a tool to compress images into the integer format used, which produces a blurred version of the original image.
While the images produced are blurred, the code is clean and minimal, and the technique is easy to implement.
This new method allows for progressive image loading, which was a favoured effect in early web design.
Including multiple previews of an image in its file can provide users with a better user experience by showcasing the image in its full quality without long loading times.
