Blurhash-like functionality

Kent C. Dodds

September 04, 2021 17:52

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:

https://res.cloudinary.com/kentcdodds-com/image/upload/w_2100,e_blur:5000,q_auto,f_auto/unsplash/photo-1534777410147-084a460870fc

It's a high blur, but it's still 58 kBs.

I could reduce it's size and just upscale it:

https://res.cloudinary.com/kentcdodds-com/image/upload/w_210,e_blur:5000,q_auto,f_auto/unsplash/photo-1534777410147-084a460870fc

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?

1

• 

  Kent C. Dodds

  September 05, 2021 11:09 Edited

  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
• 

  Stephen Doyle

  September 07, 2021 10:50

  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:

  https://support.cloudinary.com/hc/en-us/articles/360020820580-Suggested-transformation-options-for-placeholder-images-LQIP

  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
• 

  Kent C. Dodds

  September 07, 2021 22:43

  Thanks Stephen,

  After trying some of the things you suggested, I think the solution I've proposed is the best available. Thank you!

  0
• 

  Bart

  April 20, 2022 19:30

  I, meanwhile, would like to see Cloudinary support blurhash directly, and return the hash string to me.

  0
• 

  Danny Valentine

  April 21, 2022 09:27

  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,
  -Danny

  3

Post is closed for comments.