I hate scroll-based lazy loading of images. It’s bad enough when latency is merely high, as is commonly the case for such things for us in Australia, but it’s actively hostile to unreliable internet connections. When I know I’m not going to have an internet connection, I used to be able to just load pages, and know that they’d be there when I got to them. But with lazily loaded images? Nope.
(Non-scroll-based deferred loading of images is not necessarily bad, though I don’t see much purpose in it.)
Have you tried lazy loading as it is implemented specifically in Medium, while on a slow connection? (Just head out to Medium, find a post that has several pictures, and then you can simulate being a slow connection using developer tools). Basically the previews are completely useless (just an unintelligible, extremely blurry splash of colour without shape or form) and they are not progressive (not many intermediate steps between the initial splash of colour and the final picture, so you have to wait a long time anyway to even figure out if you are interested into that particular picture or not), in addition it seems to be computationally expensive (whild guess: perhaps because of the overdone gaussian blur effect), which you notice when you try to scroll and the scroll motion becomes choppy (even though I'm on a gaming PC with decent specs). I much prefer the "blocky" look that many other lazy loading solutions have, rather than the blurry look in Medium, because with the blocky look you are more likely to guess what's depicted in the photo.
Using non-progressive images with a blur is standard practice though, with little alternative.
Because you often want to use png or webp for the final image, instead of jpg (and these formats are non-progressive), and loading of progressive content can’t be controlled by scrolling.
As for that blur, medium definitely overdoes it with that, doing it on the canvas and all.
This is what my site looks like before lazy loading: https://i.imgur.com/O9YjU7o.png and I’m usually testing it on 3G and 2G to test performance – every image is available with srcset in countless versions so your browser can additionally choose which version it wants to show.
I would rather see nothing, or a solid block of colour, than a very blurred image; I have heard this opinion espoused by others as well when the topic comes up. A blurred image, especially with a sharp edge, is surprisingly disconcerting, and having the content change while you’re looking at it too.
I wish people would just leave it to the browser to handle, and I wish that browsers would start improving their approach to this sort of thing so that developers don’t feel the need to mess around with it, because they always get it wrong.
Let me be absolutely clear on this: I hate all scroll-based lazy loading of images.
Thanks for the insights (I have never implemented lazy loading myself so it's interesting to read about it).
> As for that blur, medium definitely overdoes it with that, doing it on the canvas and all.
Yeah I find it really hostile from a UX point of view.
P.S. I just looked at your imgur and the ones that are more intelligible to me are the smaller pictures in the bottom raw, while I wouldn't be able to say what's in the first two larger pictures (interestingly, it seems that with blurry pictures the larger the picture, the harder it is to guess the contents).
You can try yourself on quasseldroid.info if it loads better for you than medium — usually it should.
That said, none of it is easy to optimize.
The ideal goal is to only load images if they're actually needed, only in the size that is needed, to always show at least a placeholder, and to ensure the loading never causes the page to reflow.
That's why all this complicated loading is used, to give the illusion of a faster site.
(Non-scroll-based deferred loading of images is not necessarily bad, though I don’t see much purpose in it.)