Test plaiceholder for image lazyloading

[pixelastic]

The current implementation of using a remote placeholder seems pretty slow. I should try to use https://github.com/joe-bell/plaiceholder to generate the placeholder in the frontend directly

[pixelastic]

I gave this a try and it does not work for transparent PNGs, which makes it unsuitable for a catch-all solution.

Something I tested on https://gamemaster.pixelastic.com/monsters/ is to store a 16x16 heavily compressed version of the original image and serve it with a blur(5px) in CSS while loading. Works surprisingly well, but not suitable to norska as it would require a pre-build phase which I don't want to include (too many edge cases of cache invalidation to fix).

An hybrid solution might be to generate the blurHash of all asset images during a build, and use that as a local placeholder during the load of the final image. For unsuitable images like transparent PNG, we could instead rely on a Tailwind loader animation?

[pixelastic]

I tried the blurhash version, but it had too many downsides:

• Required a pre-build phase to generate the hash
• Do not work with transparent png
• Added some delay before the script could catch the image and decode

Instead, I used the pre-build phase to get a 8x8 version of the images and used this as base64 for the initial src of the images. With a blur(5px) in CSS on top, it looks good enough.