Pixelated Image Lazy Loading with Tailwind CSS

A few years ago, I was tasked with building a pixelated image lazy loader, which I thought would be a significant challenge. However, the solution turned out to be relatively straightforward.

1. Set the image src to a tiny version of the image.
2. Apply the CSS image-rendering: pixelated to the image.
3. Implement your lazy loading logic.
4. Once loaded, replace the image src and switch the CSS to image-rendering: auto.

To illustrate this effect, here's a CodePen I made a few years ago - Pixelated Lazy Loading.

But how does this translate to Tailwind CSS? The process is exactly the same.

Here's a version that uses Tailwind CSS to achieve the same effect, with Alpine JS substituted for JavaScript.

If you disregard Alpine JS—which is only used for the lazy loading logic—the approach remains the same. Currently, Tailwind CSS does not support image-rendering classes, so we use the arbitrary properties syntax to write the necessary CSS.

That's it! I'd recommend experimenting with the size of the small image, as it can significantly alter the pixelated effect.