This library is awesome: https://blurha.sh/
The resulting size of the image data is extremely small. The problem is they draw things into a canvas which can only happen at runtime in the browser. I want to server render the blurred image (via base64 data URL) and I plan to use the technique explained here https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained to retrieve placeholder data, encode it as base64, and then use that to server render the blurred image. However, the blur isn't significant enough. Even if I increase that blur effect a great deal it still has too much detail, resulting in a much larger size than I would like.
Here's an example image I'd like to use:
It's a high blur, but it's still 58 kBs.
I could reduce it's size and just upscale it:
This works out nicely. Here's the base64 of that:
It's not nearly as small as blurha.sh can do, but it's satisfactory for my use case. The problem is that when I up-scale that, it looks very pixelated rather than smooth.
So I guess what I want is the right size image (so it's not pixelated), just extremely blurred so I can get a very small base64 length to server render so when people land on my blog posts they can instantly see a high quality but very blurred version of the image and then the full-sized image can fade in when it's finished loading.
So, is there any way to use cloudinary to create a higher blur for the image at a given size?
Please sign in to leave a comment.