Blurhash-like functionality
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:
UklGRswBAABXRUJQVlA4IMABAACwDwCdASrSAIwAPp1On04lpCKiIEkIsBOJZ27gNX8CqK01M6dRkAuH+X5A4gCSJGjj2pOrxRpazkYalkwidgs+9e+2quAxZaTHu1bcfVABI9pWtZxhTe8UiMK3toiZB1m5ScTozYjxTTgrI3mOt+DHbOflXNp5yALLM8qdHEnfdYwOUd85AAD+9Wh9yJo+R7qQ5tCjkhf7xMTWfP3NP88qm2EmpYWMry6x+ENk00OND4LSrzUe0LfZIUZ0jI9aHiIJ105O0j3AdsDLfIvC//FH2nWkGaQW0aKl1vhQzD9IlcvvKcyPqt0szv5A5n8LoH0Ilw7cSQ5rGjv/NBupmv9M1Ji95YdMFqYeXDZdJwU/BAY67ap7pCJuHzwblMSYdT5IgJothBpsn1sXCNPNqDd1zP87IqdqZ1w233aqUZegPV/MmmSKj2z2EAQGYsmQKm4XtEmxyNCZ3goeEETsWEjLvhlq1ngwS+yx3VHre9URpqwALd++Bxz5x2FFjmO1BQR05632DuuAq28mSYFKh83NzZsUL+BkU+mTcfh31rDfRVYaNv0Np8mTa/yqpy6MDNFyFcJtJibEg+ujhEUlBAAA
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?
-
Hi Bart.
My name is Danny, and I work on Cloudinary's Developer Support team.
I can definitely see how a direct integration with BlurHas could be useful. While I can't make any promises, I have raised this as a potential future integration with our Product team for consideration.
If there are any updates, I'll be sure to post here and let you know.
Thanks,
-Danny3 -
Hi Kent,
For blur specifically, I think that example above might be the best option for your use-case, but there are other methods that can be used to create LQIPs with other styles, and I've prepared some other examples here:
Personally, I like the "handful of pixels" version, then scaling it in the browser which for your example might look like this: https://res.cloudinary.com/kentcdodds-com/image/upload/w_10,q_auto,f_auto/unsplash/photo-1534777410147-084a460870fc (with 10 pixels scaled up to 100 wide in the browser it looks like the attached screenshot:
It might work well with a CSS filter added on top, though I think blurring effects like your example are more common in real-world usage.
Regards,
Stephen
1 -
I just found that I could use `backdrop-filter: blur(20px)` to smooth things out and this works rather well:
https://codepen.io/kentcdodds-the-vuer/pen/WNOGKWX
Based on this article: https://blog.prototypr.io/how-to-make-a-background-blur-in-css-with-one-line-of-code-e446c7236e60
In fact, I can get quite a bit smaller base64 by ensuring the format is webp and having a smaller width and blur set as well: https://res.cloudinary.com/kentcdodds-com/image/upload/w_100,e_blur:1000,q_auto,f_auto/unsplash/photo-1534777410147-084a460870fc
Then with the backdrop-filter set I can smooth out the pixelation quite a bit. If anyone has a better suggestion, let me know, but I'm going to go forward with this idea.
0 -
Thanks Stephen,
After trying some of the things you suggested, I think the solution I've proposed is the best available. Thank you!
0 -
I, meanwhile, would like to see Cloudinary support blurhash directly, and return the hash string to me.
0
Post is closed for comments.
Comments
5 comments