A few years back I had to build a pixelated image lazy loader which I was certain would be the end of me. However, the solution was quite simple.
- Set the image
srcto a tiny version of the image
- Add the CSS
image-rendering: pixelatedto the image
- Add your logic for lazy loading
- When loaded, swap the image
srcand change the CSS to
Here's a CodePen I made a few years back showing of this effect - Pixelated Lazy Loading.
However, that's CSS. How does it work in Tailwind CSS? It's exactly the same.
If you ignore Alpine JS as that's only used for the lazy loading logic, the approach is identical. Currently, there is no support for
image-rendering classes in Tailwind CSS so we use the arbitrary properties syntax to write the CSS we need.
And that's all... I'd recommend having a play with the size of the small image as it can drastically change the pixelated effect.