Blurry Image Placeholders, Generated With Minimal CSS
Low-quality image placeholders (LQIPs) have a solid place in web page design. There are many different solutions but the main gotcha is that generating them tends to lean on things like JavaScript, requires lengthy chunks of not-particularly-human-readable code, or other tradeoffs. [Lean] came up with an elegant, minimal solution in pure CSS to create LQIPs . Hereās how it works: all required data is packed into a single CSS integer, which is decoded directly in CSS (no need for any JavaScript) to dynamically generate an image that renders immediately. Another benefit is that without any need for wrappers or long strings of data this method avoids cluttering the HTML. The code is little more than a line like <img src="ā¦" style="--lqip:567213"> which is certainly tidy, as well as a welcome boon to those who hand-edit files. The trick with generating LQIPs from scratch is getting an output that isnāt hard on the eyes or otherwise jarring in its composition. ...