Currently, as one scrolls down a mobile web article in beta, the images often remain blank for a noticeable amount of time before filling in. This is on a fast connection!
There is obviously a balance we want to meet between page load time (waiting time) and time waiting for an individual image to load (wait + disruptive to reading experience), but we started at one end of the spectrum. Arguably, even mild waits while reading an article can cause cognitive jolts and frustration.
Since we started on one end of the spectrum (100% page load time, 0% image load time) I suggest we start with a more conservative approach. I would recommend we move the scroll load trigger earlier so that by the time a user scrolls to the image, it is more likely to be loaded. Maybe even 2-3 screens away. This way, we can measure results while being more sure that we are not disrupting the reading experience and then increase or decrease the laziness
I don't think there is anything we should do for images in collapsed sections for now, since this would conceivably be harder to do (without auto loading first screen- images in each section).
= Implementation notes
[] We use isElementInViewport which has the default behaviour of only loading stuff in the current viewport. We should use isElementCloseToViewport which would load them sooner - the threshold should be 1.5x the height of the viewport.