[Proposal] BlurHash support

[plinss]

Came across this on Twitter the other day: https://github.com/woltapp/blurhash

Seems like something that would be useful to support natively in the browser. Something like adding a blurhash attribute to the <img> element to act as a placeholder until the image is loaded.

[Malvoz]

This was mentioned by @othermaciej in:

Controlling the appearance of images being loaded

See also related WICG thread:

Proposal: ::loading and ::loaded state

Today I used the following snippet to avoid alt text flashes in Firefox when an image is not yet loaded: img:-moz-loading { visibility: hidden; } I know it’s non-standard, but it had me thinking about a wider application of this. ::loading Allow CSS access to this state to style loading in progress. For example, show a spinner, particular background color, etc. ::loaded Allow CSS access to this state to smoothly render an image, for example a fade-in. The way images currently render in a b…

[plinss]

@othermaciej doesn’t seem to mention blurhashes anywhere, he links to techniques using small images or SVG run through a blur filter. But thanks for the reference, I’ll post there.

[collimarco]

+1 This would solve the (necessary) slow loading of large images in above the fold (like a cover image).

Currently there isn’t any solution to have a cover image and a good score in Web Core Vitals… this could be a solution.

Then Google and other browsers should consider the blurhash (or similar placeholder) instead of the actual image to measure the page load speed.