The blog post demonstrates a technique for creating lightweight, CSS-only low-quality image placeholders (LQIPs) using a combination of base64 encoded, heavily compressed, blurred versions of the final image embedded directly within the CSS. This method avoids extra HTTP requests and JavaScript, offering a performant way to improve the perceived loading experience. The blurred image is scaled up and positioned as a background, while the actual high-resolution image loads in the foreground. Once the full image loads, it covers the placeholder seamlessly. This approach provides a smoother visual transition and eliminates the jarring "pop-in" effect often seen with other placeholder methods.
This blog post by Lean Rada explores a technique for creating low-quality image placeholders (LQIPs) using only CSS, eliminating the need for separate placeholder images and thereby reducing page load times and complexity. The core principle revolves around leveraging the filter: blur() property in conjunction with a significantly scaled-down version of the final image.
Rada meticulously details how this is accomplished. He starts by embedding the image data directly within the CSS using the url() function within a background-image declaration. Critically, this embedded image is drastically reduced in size – the example provided uses a 10px by 6px image. This minuscule image serves as the foundation for the placeholder.
To transform this tiny image into a blurry representation of the final image, a large blur radius is applied using filter: blur(). This blurring effectively smooths out the pixelated nature of the miniature image, creating a visually appealing, albeit indistinct, preview of the full-resolution image content. The blog post suggests a blur radius of 10px as a starting point, but encourages experimentation to find the optimal value for specific use cases.
Furthermore, the post emphasizes the importance of maintaining the correct aspect ratio. Since the placeholder image is dramatically smaller than the final image, stretching or distorting can occur if the aspect ratio isn't preserved. To address this, the CSS includes background-size: cover, ensuring the blurred placeholder covers the entire container while respecting the original image's proportions.
This combination of a tiny embedded image, a substantial blur filter, and the background-size: cover property creates a lightweight, purely CSS-based LQIP solution. It obviates the need for managing separate placeholder image files, simplifying development workflows and optimizing page performance by reducing the number of HTTP requests and the overall page weight. Finally, the author suggests using this technique for images above the fold, acknowledging that using this method for a very large number of images could potentially increase the size of the CSS file itself.
Summary of Comments ( 53 )
https://news.ycombinator.com/item?id=43523220
HN users generally praised the technique described in the article for its simplicity and minimal code footprint. Several commenters appreciated the avoidance of JavaScript, leading to improved performance, particularly on mobile devices. Some pointed out potential drawbacks, such as the doubled image payload and a slight flash of unstyled content (FOUC) if the CSS loads after the image. A few users suggested alternative approaches, including inline SVG blur filters and using the
background-imageproperty instead of<img>tags for placeholders, while acknowledging trade-offs related to browser compatibility and control over the blurring effect. Overall, the discussion highlighted the ongoing search for efficient and elegant image placeholder solutions, with this CSS-only technique seen as a valuable addition to the developer's toolkit.The Hacker News post "Minimal CSS-only blurry image placeholders" discussing the article at leanrada.com/notes/css-only-lqip/ generated a moderate amount of discussion with a mixture of praise and pragmatic concerns.
Several commenters appreciated the elegance and simplicity of the pure CSS approach, finding it a clever workaround to achieve the low-quality image placeholder (LQIP) effect without JavaScript or specialized image processing. They highlighted the benefit of reduced complexity and improved performance by avoiding extra requests and dependencies. The minimal nature of the CSS was seen as a significant advantage.
However, some commenters raised concerns about the technique's limitations. One key point was the inability to easily customize the blur intensity. The fixed blur radius offered by
filter: blur()might not be suitable for all images and design preferences. Another issue raised was the potential for layout shifts as the actual image loads and replaces the blurred placeholder. This could be disruptive to the user experience, especially on slower connections.The practicality of using this technique for dynamically generated images was also questioned. While it works well for statically known images where the CSS can be pre-written, it becomes more challenging to apply when the image URL isn't known beforehand. Commenters pointed out that server-side rendering or JavaScript would likely be needed in those scenarios, negating some of the benefits of the CSS-only approach.
Finally, a few commenters offered alternative solutions, such as using SVG-based placeholders or leveraging existing image optimization techniques that already generate blurred previews. These suggestions implied that while the CSS method is interesting, it might not be the most robust or versatile solution for all use cases. Overall, the comments reflect a nuanced view, acknowledging the ingenuity of the technique while recognizing its limitations in real-world applications.