plinss
October 30, 2020, 1:11am
1
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.
3 Likes
Malvoz
October 30, 2020, 3:37am
2
This was mentioned by @othermaciej in:
See also related WICG thread:
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
October 30, 2020, 3:55am
3
@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.