As a primarily JS user, proficient CSS and HTML users are amazing.
This certainly looks cool and is a nice problem to think about. But. When I see a website that has placeholder images I usually notice it. I notice it, because it almost always feel slower. I wonder how many times it would be straight up faster just to load a damn image the first time.
I also never know at first if the blurred blob was supposed to be there or is something still loading. The loading seems to always be when I am supposed to see the image already, instead when I’m a viewport height from seeing if.
Do browsers download images for static HTML all at once or do they defer it if the page is very high and there are lots of images? If not, why they don’t do it?
To answer your question, most browsers should fetch all the images up front so long as there’s an actual img tag to fetch.