I have plenty of bandwidth. (Also: exactly what bandwidth does it save, even for those that have little bandwidth? Aren't browsers better equipped to decide what images to load or not?)

The page doesn't load any faster; the only effect is that I see a stupid fade-in instead of seeing the page with the image more or less immediately.

The Cloudflare host serving the image is a 4 ms roundtrip away. The bandwidth is 250/100 Mbit/s.

  #ab -n 100 -c 10 "https://cdn-images-1.medium.com/max/1500/1*UW2Mz4yMD65VYgFZILiL_w.png"
  ..
  Requests per second:    113.23 [#/sec] (mean)
  Time per request:       88.314 [ms] (mean)
  Time per request:       8.831 [ms] (mean, across all concurrent requests)
  Transfer rate:          25649.12 [Kbytes/sec] received

So to summarize my points:

- The javascript-driven delayed loading + fade-in is completely unnecessary and primarily distracting for people with high bandwidth connnections.

- The browser is in a better spot to figure out how to handle the loading of these images. Just make sure the dimensions are set so that the layout isn't modified after the images have loaded.

- The fade-in effect was novel the first week, a couple of years ago, but is now just annoying.

If any of the client-side developers who no doubt downvoted this sub-thread would step up to actually talk about it, it would be quite welcome. :)

The browser is definitely in a better position to handle downloading these images on a slow connection without blocking the rest of the page from loading. Unfortunately, it doesn't, at least without extensions that only a very small percentage of users are aware exist. I have long wished for browsers to use more discretion when on slow connections, or failing that, to at least inform websites that they are on a slow connection so that I can optimize my sites for slow connections without sacrificing the experience for fast ones. Alas, this is not the world we live in.

Please explain to me what benefit the fade-in has to

a) low-bandwidth users

b) high-bandwidth users

?

Edit: answering myself.

There are least four aspects to the delayed display of images that I can imagine.

1) delay from loading time to when the download is triggered

2) delay and annoyance caused by the time fade-in itself takes

3) delay caused by not progressively painting the image while it is being downloaded

4) perhaps most important to modern designers: avoiding slowing down the mobile browser by avoiding decoding images that the user has already scrolled past.

I think #4 is why desktop users with 10x faster CPUs and connections suffer.

I do think this is the wrong way to go about solving problems like this.

The fade-in, as I understand it, waits until the page has loaded to actually start downloading the image. This means that the image download will not be competing for connections and bandwidth with HTML/CSS/JS files that are required for first paint.

Whether this makes a significant difference is probably highly dependent on the page and the user's connection, and I have no idea without profiling. But it's at least plausible that it would help some users on slow connections.

Of course, it could just be that devs are A/B testing time until the "load" event fires, in which case they've just found a way to cheat the metric.