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.
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.