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.
This was mentioned by @othermaciej in:
See also related WICG thread:
@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.
+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.