Thank you for making this, in particular thank you for the "disable lazy loading" option, which I have always found annoying when I'm on a slow connection (which is very often since I'm in Australia).
(Non-scroll-based deferred loading of images is not necessarily bad, though I don’t see much purpose in it.)
Most users stop reading without ever scrolling down, having already made a decision yes or no.
So loading the content after scrolling down uses more of that users data plan, and makes the site load slower.
That said, I simply replace the thumbnail with the actual image as soon as it scrolls into the view, and let the browser do its own thing.
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’m always interested in improving this.
> 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).
sorry, I meant "row"
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.
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.
That said, if you disable JS, your browser will load all the images, and that's not exactly ideal itself for most people (the page loads ~10x longer)
Browsers could still help a lot with better efficient image loading, but the default is not all that bad.